在“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（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

我可能会迟到。希望这对那些希望使用反应预设为laravel项目设置开玩笑测试环境的人有所帮助。

安装和配置

安装是dev依赖

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.