代码之家  ›  专栏  ›  技术社区  ›  davidesp

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

  •  0
  • davidesp  · 技术社区  · 6 年前

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

    我做了两部分: Backend Frontend .

    当我运行应用程序时(在编译 前端 $ npm run dev ),我运行了 Laravel 应用程序: $ php artisan serve

    使用该应用程序,我可以创建 Project ,但当尝试创建新的 Task 500 Internal Server Error API ( 后端 )如下图所示:

    enter image description here

    如您所见,在上图中,请求的路由是: /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!');
        }
    }
    ?>
    

    前端 已经实现,因为这个问题发生在 .

    如何使用测试框架: JEST 具体的 拉瓦维尔 + React

    请提供你能提供的所有信息。我会非常感激的。

    谢谢!

    1 回复  |  直到 6 年前
        1
  •  2
  •   aimme    6 年前

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

    安装和配置

    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.
    
    推荐文章