Setting up Jest in a Laravel project
Tags: jest, javascript, laravel, vue
Published: 2018-04-11 10:07:53

---
title: Setting up Jest in a Laravel project
published: true
description: Learn how to integrate jest testing framework for a laravel project.
tags: jest, javascript, laravel, vue
cover_image: https://thepracticaldev.s3.amazonaws.com/i/v7k4opqeusipeu2jn0ak.png
---

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:

```bash
laravel new laravel-jest
```

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

```bash
npm install
```

### Installing and configuring Jest

Let's install jest:

```bash

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. 

```js

// 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:

```js

// 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:


```js

// 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:


```bash
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:


```js

// 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:


```js

// .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:

```js

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