Running Jest with a Vue2 application

The Vue CLI and test utils have a 'happy path' to setup testing libraries, but they are naturally geared to the latest version of Vue and other dependencies.

If you need to add tests to an existing Vue 2 application you might find the process a little tricky.

You'll need to install the version of Vue test utils and vue-jest that correspond to your version of Vue.

For example if you're running Jest 29, you'll need to install vue2-test like so:

npm install --save-dev @vue/test-utils@1 @vue/vue2-jest@29

Because the tests run in an environment without a native DOM we'll also need to configure them to use the jsdom implementation.

Install the package like so:

npm install --save-dev jest-environment-jsdom

Then configure Jest to use the virtual JS DOM. Jest can be configured either via a dedicated file, or through your package.json like so:

{
 // other config...

 "jest": {
        "testEnvironment": "jsdom",
        "moduleFileExtensions": [
            "js",
            "json",
            "vue"
        ],
        "setupFiles": [
            "./jest-setup.js"
        ],
        "transform": {
            "^[^.]+.vue$": "@vue/vue2-jest",
            ".*\\.(js)$": "babel-jest"
        }
    }
}

In my case I required some extra config that's loaded in jest-setup.js. This is because my app had global dependencies for LoDash and a utilities file. To make these functions available in the test environment they are loaded like this.

jest-setup.js

import lodash from 'lodash';
import utils from './resources/js/utils.js';

global._ = lodash;
global.utils = utils;