DEV Community

Cover image for Setting up Jest in a Laravel project
Kati Frantz
Kati Frantz

Posted on

Setting up Jest in a Laravel project

In this tutorial, we are going to learn how to set up jest for client-side testing laravel applications.

Setting up a new laravel application

We'll start by installing a new laravel project:

laravel new laravel-jest
Enter fullscreen mode Exit fullscreen mode

We'll install all the npm dependencies for this project:

npm install
Enter fullscreen mode Exit fullscreen mode

Installing and configuring Jest

Let's install jest:


npm install jest --save-dev

Enter fullscreen mode Exit fullscreen mode

Next, we'll create a jest configuration file for the testing framework. In the root of our application, create a jest.config.js file.


// jest.config.js

module.exports = {
  testRegex: 'resources/assets/js/test/.*.spec.js$'
}

Enter fullscreen mode Exit fullscreen mode

The testRegex configuration above configures jest to fetch the tests from the resources/assets/js/test directory, and find any file that ends with .spec.js.

Writing a sample test

In the resources/assets/js/test directory, create an index.spec.js file, add a simple jest test asuch:


// resources/assets/js/test/index.spec.js

test('it works', () => {
  expect(1 + 1).toBe(2)
})

Enter fullscreen mode Exit fullscreen mode

Let's add a test script in our package.json file:


// package.json

"scripts": {
    "test": "jest"
}

Enter fullscreen mode Exit fullscreen mode

To run our example test, run npm test in your terminal, and of course we should get a passing test.

Configuring jest for testing Vue components

To test our vue components, let's install some dependencies that we'll need:

npm i --save-dev vue-jest babel-jest @vue/test-utils

Enter fullscreen mode Exit fullscreen mode

@vue/test-utils is the vue testing library, babel-jest, for configuring jest to use babel transpiling, and vue-jest, for configuring jest to load .vue files.

Next, we'll configure jest to use the above installed plugins:


// jest.config.js


module.exports = {
  testRegex: 'resources/assets/js/test/.*.spec.js$',
  moduleFileExtensions: [
    'js',
    'json',
    'vue'
  ],
  'transform': {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  },
}

Enter fullscreen mode Exit fullscreen mode

In the above configuration, we set jest to load any files that end with the .vue files using the vue-jest transformer plugin, and any files that end with .js to be loaded using the babel-jest plugin.

Finally, we need to set up a .babelrc file at the root of our project for jest, since laravel-mix does not expose its babel configuration. Create a .babelrc file, and in it, add the following configuration:


// .babelrc

{
  "presets": [
    "env"
  ]
}

Enter fullscreen mode Exit fullscreen mode

To test all of this, we'll write a simple test for the Example.vue component that comes with Laravel by default:


// resources/assets/js/test/index.spec.js

import { mount } from '@vue/test-utils'
import ExampleComponent from '../components/ExampleComponent.vue'

test('it works', () => {
  expect(1 + 1).toBe(2)
})

test('should mount without crashing', () => {
  const wrapper = mount(ExampleComponent)

  expect(wrapper).toMatchSnapshot()
})

Enter fullscreen mode Exit fullscreen mode

Running our test now should give you a successful result.

Top comments (5)

Collapse
 
spham profile image
spham • Edited

Hi,
in last step, i have error bellow :

FAIL resources/assets/js/test/index.spec.js
● Test suite failed to run

Cannot find module 'babel-preset-env' from 'C:\CAT_USERDATA\blog'
- Did you mean "@babel/env"?

  at Function.module.exports [as sync] (node_modules/resolve/lib/sync.js:74:15)
  at resolveStandardizedName (node_modules/@babel/core/lib/config/files/plugins.js:101:31)
  at resolvePreset (node_modules/@babel/core/lib/config/files/plugins.js:58:10)
  at loadPreset (node_modules/@babel/core/lib/config/files/plugins.js:77:20)
  at createDescriptor (node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
  at items.map (node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
      at Array.map (<anonymous>)
  at createDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
  at createPresetDescriptors (node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
  at presets (node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
Enter fullscreen mode Exit fullscreen mode

in .babelrc , i replace env with @babel/env

Collapse
 
jhynzar profile image
Mj Tapiru

The post is somewhat outdated. I encountered this error too and I'm sure you will run into some more errors, feel free to get back and I'll answer it if I ran into it before.

For the solution:

You should change the .babelrc file to this

{
    "presets": [
        "@babel/preset-env"
    ]
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
zaratedev profile image
Jonathan Zarate

Nice, thanks for report this error. :D

Collapse
 
deldari profile image
MA Deldari

if anybody want use babel 6 read this

Jest 24 dropped support for Babel 6. We highly recommend you to upgrade to Babel 7, which is actively maintained. However, if you cannot upgrade to Babel 7, either keep using Jest 23 or upgrade to Jest 24 with babel-jest locked at version 23, like in the example below:
{%
"dependencies": {
"babel-core": "^6.26.3",
"babel-jest": "^23.6.0",
"babel-preset-env": "^1.7.0",
"jest": "^24.0.0"
}
%}

While we generally recommend using the same version of every Jest package, this workaround will allow you to continue using the latest version of Jest with Babel 6 for now.

this is the source: jestjs.io/docs/getting-started

Collapse
 
abrahambrookes profile image
Abraham Brookes

I literally spent 5 hours this morning trying to get this to work and googling furiously before finally landing at this exact solution, and then this afternoon I find this article. Thanks you sir, if only I found this sooner.