【问题标题】:Using JEST on a "Laravel + React" project to test the app API (Backend)在“Laravel + React”项目中使用 JEST 测试应用 API(后端)
【发布时间】:2018-10-13 18:08:12
【问题描述】:

我遵循了这个教程:

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

我做了两个部分:BackendFrontend

当我运行应用程序时(在使用 $ npm run dev 编译 Frontend 之后),我运行 Laravel 应用程序时使用:$ php artisan serve

使用该应用程序,我能够创建一个Project,但是在尝试创建一个新的Task 时,我从API (Backend) 得到了一个500 Internal Server Error,如下所示:

如您所见,在上图中,请求的路线是:/api/tasksPOST 方法)。

存档:/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(很多开发人员非常推荐)这个具体 @987654344 @ + React 项目?

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

谢谢!

【问题讨论】:

  • 你的日志文件说错误是什么?
  • 我们看不到错误。在开发人员控制台中显示响应选项卡和/或共享laravel.log 跟踪。如果你检查这些,它可能真的很明显出了什么问题

标签: php reactjs laravel jestjs laravel-5.7


【解决方案1】:

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

安装和配置

将 jest 安装为开发依赖项

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.

【讨论】:

  • 我按照此处的步骤操作,但我的测试可以识别我正在测试的组件,请在此处查看我的错误详情stackoverflow.com/questions/60376159/…
  • "test the app API (Backend)"部分在哪里?这个答案是关于 OP 问题的一半
猜你喜欢
  • 1970-01-01
  • 2022-01-19
  • 2021-06-04
  • 2021-10-16
  • 2016-09-14
  • 2020-12-10
  • 2020-05-08
  • 2021-11-25
  • 2021-07-16
相关资源
最近更新 更多