Unit testing in Vue & Mocha (part 2)
This article builds on Unit testing in Vue & mocha (part 1)
What project setup?
What packages are needed?
Building on the first article we can now start to look at how we would go about testing when using Vuex.
A .spec.js file that uses vuex
The numbers below reference the code Modal.spec.js code block above.
- We import
vuexas we are going to create a store inside the test file. createLocalVuefrom vue utils. Is used to create a local class of vue so we can use components, plugins and mixins without polluting the global vue class.
4. sinon is imported. sinon allows you to create test doubles. For example mock methods from the component we want to pull into the test.
5. sinon-chai is imported. Extends Chai with assertions for the Sinon.JS mocking framework.
6. The modal component is imported (the component we are testing)
7. BaseButton is imported — we have to import this component as it is registered globally.
8. chai.use is called and set to use sinonChai
11. createLocalVue is stored in a variable for reuse.
12. Set the localVueto use vuex.
13. Register the BaseButton component as it was previously registered globally.
16. Create the store variable.
17. Create the getters, matching the component getters. ( here we can change the values to help us test, for example, if something is hidden in v-if we can change to true in the test so it becomes available)
18. Create the actions, matching the component.
25. store a mockMethod using sinon.spy(). A spy call is an object representation of an individual call to a spied function, which could be a fake, spy, stub or mock method.
28. A new store is created passing the getters and actions.
33. We create the shallow mount version of the component with the localVue and store passed in.
41. setMethods allows you to use methods from the store, in this case, we are using the action we created, matching the component file action TOGGLE_MODAL. https://vue-test-utils.vuejs.org/api/wrapper-array/#setmethods
42. find is used to search for a selector in the component. From vue Utils https://vue-test-utils.vuejs.org/api/wrapper/#find
42. trigger is used to pass in the event, in this case ‘click’ is the event that would fire on this selector. https://vue-test-utils.vuejs.org/api/wrapper/trigger.html
43. Here is the test. We use expect to assert that the mockmethod to.have.been.called.calledWith chainable methods come from chai and can be used to test a variety of scenarios. calledWith can check the see what arguments have been passed in, this way we can be sure that what gets passed in does not change otherwise the test will fail and indicate why.
Summary
With this test, we can check that a store action was called, by testing what would happen if we triggered a click event on a selector.
The store logic itself can be tested independently on its own, which would give you a detailed test of what each action and mutation are doing.
There are many more things that can be tested, one of the main things is to know what to test, and why you are testing. Here’s a good article about that:
Once having the basic setup and a general idea of what the main parts of the code are doing, you can build upon this and use specific syntax to test most/all vue components. 👍
