# Configuring Jest to test your VueJS on Laravel 5.8

Jest is one of the most used tools to test JavaScript, but it requires some configuration to work with VueJS on Laravel. So here it goes a very simple and direct way to do that:

## Configuring...

1. Install the followgin dependencies, for dev only: @vue/test-utils, babel-core, babel-jest, babel-loader, babel-preset-env, jest and vue-jest:

```
    $ npm i -D @vue/test-utils babel-core babel-jest babel-loader babel-preset-env jest vue-jest
```

> Laravel had already installed a babel version, but I had to install it again in order to keep everything working


2. Add the following lines in your package.json file:

    - Inside scripts node:

```
    "scripts": {
        "test": "jest",
        "test-watch": "npm run test -- --watch"
    }
```

    - Create the following node:

```
    "babel": {
        "env": {
            "test": {
                "presets": [
                    ["env", {"targets": {"node": "current"}}]
                ]
            }
        }
    }
```

3. Create a file named jest.config.js on your project root with the following content:

```
module.exports = {
    verbose: true,
    moduleFileExtensions: [
        "js",
        "json",
        "vue"
    ],
    transform: {
        ".*\\.(vue)$": "vue-jest",
        "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    collectCoverage: true,
    collectCoverageFrom: [
        "src/components/*.{js,vue}",
        "!**/node_modules/**"
    ],
    coverageReporters: [
        "html",
        "text-summary"
    ],
}
```

## Creating the test...

Once the dependencies are already installed and configured, you just need to create the tests. Create a new file under resources/js named ExampleComponent.test.js. Let's test the Vue Example Component, that you have already:

```
resources/js/ExampleComponent.test.js

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

describe('ExampleComponent', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(AttendanceAddress);
    expect(wrapper.isVueInstance).toBeTruthy();
  });
});
```

## Running the test...

Now go to the console and run:

```
npm test
```

This will test your component. If you found a lot of errors and is solving them at once, run:

```
npm run test-watch
```

This command will automatically re-run your tests when the files were changed.
For more info...

You probably already knows how to use Jest or vue-test-utils, but if you need any help, their sites has the completly description of all asserts.

=> https://jestjs.io/docs/en/using-matchers Jest
=> https://vue-test-utils.vuejs.org/guides/#common-tips Vue-test-utils

=> /blog/ Back