Edd Yerburgh is a Sofware Engineer at the BBC in London and is also the main author of Vue Test Utils library. As soon as your Vue application gets large you’re going to need to write automated tests to keep bugs away.
Ed recommends following the Front-End testing Pyramid to ensure you’re testing the right things in the right way.
In his talk he discusses what these different kind of tests are and how you can write them in your Vue applications. As you can see the bulk of the tests are unit tests, then snapshot tests to verify the style, and then end to end tests to ensure everything is working together.
This is code that opens a browser, runs through actions, and checks that your app runs correctly. It could look like this:
You might think this is all you need, but it’s difficult to debug, and they can be slow. This is why we need Unit Tests.
Edd uses Jest to write unit tests. When writing lots of small tests which cover single functions ensures you know where problems lie when they pop up. Unit tests are easy to debug because they focus on one part of your code base. Unit tests are easy to write for Vue components, and Edd does this using a Component Contract.
Component Contract is the API or user interface that your component has. A component contract focuses on the input and output that you expect, treating the component as a black box. Input could be a user action, props, or store, and the output could be rendered output, Vue events, or function calls. They could look like this:
Snapshot Tests take a snapshot of a component, and compare it against the previous snapshot. Edd shows how to use the
toMatchSnapshot() syntax in your tests to see if the component html generated is the same. This can safeguard about unintended changes to components, and snapshots are very quick to update.
There’s a great live demo at 16:23, where he shows how to use snapshots.
Edd wrote a book called Testing Vue.js Applications, and you can get 40% off with the code: ctwvueconfus18.