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

Question

我跟着这个教程：

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

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

当我运行应用程序时（在编译Frontendwith: 之后$ npm run dev），我运行了Laravel应用程序：$ php artisan serve。

使用该应用程序，我能够创建一个Project，但是在尝试创建一个新的时，Task我500 Internal Server Error从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在这个特定的 Laravel+React项目中使用测试框架：（很多开发人员非常推荐）？

请提供您所能提供的所有信息。我会很感激的。

谢谢！

Answer 1

我可能来晚了。希望这对那些希望使用 react 预设为 laravel 项目设置 jest 测试环境的人有所帮助。

安装和配置

将 jest 安装为 dev 依赖项

npm install jest --save-dev

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

/**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.