Unit testing in Vue & Mocha (part 1)

Vue and mocha

This document aims to outline some short examples of how to unit test using a Vue project. This guide is specifically designed to be used on the following Vue set up.

What project setup?

• Vue CLI: 4.0.5
• Vue: 2.6.10

What packages are needed?

• @vue/cli-plugin-unit-mocha
• @vue/test-utils
• chai

With the above setup, you can now start writing Mocha unit tests in Vue. The steps below show how to create tests.

Creating test files

Files that are picked for the testing end with .spec.js. You can see how this is set or change this inside package.json.

package.json

"scripts": {
    "test:unit": "vue-cli-service test:unit src/**/*.spec.js"
  }

How to run tests?

In the terminal type:

npm run test:unit

Let's see how a basic unit test file will look…

A basic unit test file

The numbers below reference the code AppLoadingScreen.spec.js code block above.

1. A component spinner is imported
2. AppLoadingScreen.vue (the Vue component we are testing is imported)
3. shallowMount is imported from Vue utils. It creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components. A stubbed child component is a replacement for a child component rendered by the component under test. Some more details here on how stubbed components work: https://stackoverflow.com/questions/52962489/what-are-stubbed-child-components-in-vue-test-utils
4. expect is imported from chai. expect is a chainable language to construct assertions. Assertions are used to test a specific thing in the code. Some examples of what can be chained to expect to test https://www.chaijs.com/api/bdd/

6. describeis used to outline what you are testing. This will also show in the terminal after running the test. In this case, we are testing the appLoadingScreen component.

9. beforeEach() is a Mocha method which executes the callback argument before each of the tests. We run shallowMount() inside beforeEach() so a component is mounted before every test.

10. shallowMount() method is used placing our test component inside.

13. it is where you perform individual tests. You should be able to describe the tests, in our case “it should render Spinner on mount”. This clearly outlines what the test will be.

14. expect from chai. Asserts that something should be tested. In our case we look inside our component for the Spinner component, by using find from vue utils. Find returns a wrapper of the first DOM node or Vue component matching selector. As we are using chai expect, we can chain keywords. In this case, we add to.be.true

Running the above test npm run test:unit

Displays the results of the test describe being the “AppLoadingScreen” and it being “should render Spinner on mount”.

Summary

That’s a basic unit test using mocha and Vue.

As you can imagine each component may have different logic in with new test syntax needed. Vuex is commonly used in Vue apps, which adds another layer of complexity when testing.

Part 2 looks at Vuex and unit testing. Follow the link below to see this. 👍

Unite testing in Vue & Mocha part 2