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
We'll install all the npm dependencies for this project:
npm install
Installing and configuring Jest
Let's install jest:
npm install jest --save-dev
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$'
}
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)
})
Let's add a test script in our package.json file:
// package.json
"scripts": {
"test": "jest"
}
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
@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'
},
}
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"
]
}
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()
})
Running our test now should give you a successful result.
Top comments (5)
Hi,
in last step, i have error bellow :
FAIL resources/assets/js/test/index.spec.js
● Test suite failed to run
in .babelrc , i replace env with @babel/env
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
Nice, thanks for report this error. :D
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
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.