On the 3rd of March we attended an inspiring talk by Edd Yerburgh “Unit testing Vue components: Why test, what to test, and how to test Vue components”. Because testing is an important part of developing a software project we will take a closer look at how we can unit test our code in an efficient way.
Why, What and How
By testing the codebase, we make sure it meets all the functional requirements. Test code allows a developer to write new features or refactor old code and still be confident that he does not break other parts of the application.
In a component architecture, which is widely used in frontend frameworks such as Angular, React and Vue.js, it is important that we validate the input and output of these components as well as the business logic in it. Inputs can be values passed to the component or interactions with the UI. Outputs can be values displayed on the screen or events thrown to another component.
To actually write tests, we have to integrate a testing framework into our project. There are multiple frameworks available, one being Jest. Jest is a zero configuration testing framework that allows to write fast and intuitive tests.
Because Jest is zero configuration based, it will pick up any tests that end with .test.js and .spec.js. To make jest run the tests, we add it to the script section of the package.json.
Consider we have a function sum that adds two parameters together.
We want to write a test that checks if the result of this function matches our expectations. We will use the syntax of Jest to verify the result of our function.
This is a very basic way of testing the ‘business logic’ of the codebase. In the next section we will look at how we can use a similar testing approach to test Vue components.
Testing Vue Components
To allow us to test Vue components we will be using vue-test-utils. This is the official test library for Vue.js. It provides methods to specifically test Vue components. To be able to use jest we will need a small configuration on how it has to parse .vue files. We will be using vue-jest for this purpose.
As an example, we create a small component that counts the number of times we click on a button.
As described we want to test the inputs and outputs of this component. There is only one input for this component, which is a click on the button. The component outputs a counter and a button to adjust this counter.
We will use the mount function provided by test-utils to create a wrapper of the Counter component. Next we write two tests to verify some of the outputs of the component by using wrapper.html() or wrapper.contains() . In a similar fashion we can use wrapper.find() to find the button and click on it to increase the counter. Another powerful feature of Jest is snapshot testing. Snapshot testing will render the tree of a Vue component and save the state. When the test runs a second time, it will verify if changes occured to the HTML output of the component. This can be a really good safeguard against unintended changes. A failing snapshot test means we should check the rendered output and verify if the changes we made are intended. The saved snapshot state can be overwritten when the component is rendered correctly.
We will match the components html to the saved snapshot. If none are saved yet, it will save a new snapshot. By using both techniques to test the code, we have good coverage.
Testing is always important in a frontend project. Jest and vue-test-utils allow us to write test code in an initiative way. The tools are available to make robust Vue.js projects. At Continuum, we strive to create robust projects even for frontend projects. Do you agree testing and creating robust projects is important? Continuum might be a place for you!