DEV Community

loading...
Cover image for Setting up Jest in a Laravel project

Setting up Jest in a Laravel project

bahdcoder profile image Kati Frantz ・2 min read

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.

Discussion (3)

pic
Editor guide
Collapse
spham profile image
spham

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