Using JEST on a "Laravel + React" project to test the app API (Backend)

Question

I followed this tutorial:

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

I did both parts: Backend and Frontend.

When I ran the application (after compiling the Frontend with: $ npm run dev), I ran the the Laravel application with: $ php artisan serve.

With the application, I was able to create a Project, but when trying to create a new Task I got a 500 Internal Server Error from the API (Backend) as you can see below:

As you can see, on the image above, the requested route was: /api/tasks (POST method).

On file: /routes/api.php I have the following content:

<?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');
?>

On file: app/Http/Controllers/TaskController.php I have the following content:

<?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!');
    }
}
?>

I'm trying to troubleshoot this problem and also, detect this kind of problems in early stages of the development without having to have the Frontend already implemented, since this problem is happening on the Backend.

Then, my question is: How can I use the test framework: JEST (which it is very recommended by lot of developers) with this specific Laravel + React project?

Please, provide all the information you can on this. I will really appreciate it.

Thanks!

Answer 1

I might be late here. hope this helps to those who are looking to setup a jest test environment for laravel projects using react preset.

Installation and configuration

Install jest as dev dependency

npm install jest --save-dev

Create a new config file for jest in project root jest.config.js

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

add test command to package.json. see i have added "scripts": { "test": "jest"} . your package.json file might be different. i pasted my whole package.json just for presentation purpose. no need to replace it all with this. just the script test part need to be added.

/**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"
  }
}

It's done

Now to test whether it works

Create a sample test resources/js/test/index.test.js

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

finally test it by running

npm test

Output will be something like

> @ 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.