Setting up unit tests In Vue With Jest framework

For unit testing Vue projects, VueJS created a utility project for testing Vue apps. So, the utilities will create the configuration for running tests. We can test any Vue project in Karma, Jest or Mocha + webpack.

If you are creating a new project with Vue CLI, you can set up Jest/Mocha tests by configuring the project after running vue create . or vue create <proj-name>.

Vue CLI has built-in support of adding Jest and Mocha tests while creating with vue-cli. If you select either of them, it will add configurations required for testing while creating a new Vue project. So, you need not run the following commands to install the testing framework again.

Adding testing framework to an existing project

If you already have a new project, you can set up testing by running the following commands if you have vue-cli installed.

# unit testing
vue add @vue/unit-jest

# or:
vue add @vue/unit-mocha

# end-to-end
vue add @vue/e2e-cypress

# or:
vue add @vue/e2e-nightwatch

If we run vue add @vue/unit-jest to install jest, it will inject configuration required to run tests into the existing vue project.

What’s in the example spec file

After installing any of the testing framework(s), we will have a default spec file (example.spec.js) created for us in the test\unit folder.

import { shallowMount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

In the above example.spec.js file, we will pull the shallMount function from vue-test-utils library. The shallowMount function will return a wrapper for the vue component passed in. With this wrapper, we will have access to DOM, data(), props, methods etc.

As you can see from the above test, we will set an msg as “new message” and pass it as a propsData to the shallMount function and get the wrapper out.

The expect function is an asserting function in the Jest framework to test if we got what we’ve expected. So, we assert the text to match the “new message” (which is what we have passed). So, our test should pass as expected unless you have changed anything in the HelloWorld.vue file.

Running test

One we complete the setup, to run a test we just need to open the terminal and run npm run test:unit to run the tests.

And here is the output after running the tests.

Automatically run tests after every save

If you wish to run the tests after saving in either tests or the component files, you can append --watch to the test:unit value.

So, if you open the packages.json file, you’ll see the following line

    "test:unit": "vue-cli-service test:unit",

Append --watch at the end of the value. So, the test:unit value should look like this

    "test:unit": "vue-cli-service test:unit --watch"

After this is completed, run npm run test:unit so we can have tests running when something is changed in any of the files.

References

• Vue-Test-Utils
• Jest framework