在“ Laravel + React”项目上使用JEST来测试应用程序API（后端）

Question

我遵循了本教程：

https://blog.pusher.com/react-laravel-application/

我做了两个部分：Backend和Frontend。

运行应用程序时（用Frontend编译$ npm run dev后，我用Laravel运行$ php artisan serve应用程序。

使用该应用程序，我可以创建一个Project，但是当尝试创建一个新的Task时，我从500 Internal Server Error（{{1 }}），如下所示：

如上图所示，请求的路由为：API（Backend方法）。

在文件上：/api/tasks我具有以下内容：

POST

在文件上：/routes/api.php我具有以下内容：

<?php
Route::get('projects', 'ProjectController@index');
Route::post('projects', 'ProjectController@store');
Route::get('projects/{id}', 'ProjectController@show');
Route::put('projects/{project}', 'ProjectController@markAsCompleted');
Route::post('tasks', 'TaskController@store');
Route::put('tasks/{task}', 'TaskController@markAsCompleted');
?>

我正在尝试解决此问题，并且还在开发的早期阶段检测到此类问题，而不必实施app/Http/Controllers/TaskController.php，因为此问题发生在<?php namespace App\Http\Controllers; use App\Project; use Illuminate\Http\Request; class ProjectController extends Controller { public function index() { $projects = Project::where('is_completed', false) ->orderBy('created_at', 'desc') ->withCount(['tasks' => function ($query) { $query->where('is_completed', false); }])->get(); return $projects->toJson(); } public function store(Request $request) { $validatedData = $request->validate([ 'name' => 'required', 'description' => 'required', ]); $project = Project::create([ 'name' => $validatedData['name'], 'description' => $validatedData['description'], ]); return response()->json('Project created!'); } public function show($id) { $project = Project::with(['tasks' => function ($query) { $query->where('is_completed', false); }])->find($id); return $project->toJson(); } public function markAsCompleted(Project $project) { $project->is_completed = true; $project->update(); return response()->json('Project updated!'); } } ?> 上

然后，我的问题是：如何使用具有特定性的测试框架：Frontend（许多开发人员强烈建议使用） Backend + JEST项目？

请提供与此有关的所有信息。我将非常感激。

谢谢！

Answer 1

我可能在这里迟到了。希望这对那些希望使用react预置为laravel项目设置一个有趣的测试环境的人有所帮助。

安装和配置

将玩笑安装为开发依赖项

npm install jest --save-dev

为项目根jest.config.js中的jest创建一个新的配置文件

/**jest.config.js**/
module.exports = {
  testRegex: 'resources/js/test/.*.test.js$'
}

向test添加package.json命令。看到我添加了"scripts": { "test": "jest"}。您的package.json文件可能有所不同。我粘贴了整个package.json只是为了演示。无需将其全部替换。只是需要添加脚本测试部分。

/**package.json**/
{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "test": "jest"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.18",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.1",
    "jest": "^24.1.0",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-test-renderer": "^16.8.2",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0"
  }
}

完成了

现在要测试它是否有效

创建示例测试resources/js/test/index.test.js

/**resources/js/test/index.test.js**/
test('it works', () => {
  expect(1 + 2).toBe(3)
})

最后通过运行

对其进行测试

npm test

输出将类似于

> @ test /home/aimme/docker/demoproject
> jest

 PASS  resources/js/test/index.test.js
  ✓ it works (3ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        1.025s
Ran all test suites.