The presentation and accopanying repository provides more examples in creating asserions for Vuex mutations/getters and actions (with Jest mocks).
3. Ensure tests are run in an isolated environment (i.e.tests software/system)
4. Pick the appropriate (i.e. well supported) tooling
- framework/runner/assertion library
Many frameworks provide officially supported unit testing frameworks where developers do not have to worry much about configuration. With vue-test-utils, out-of-the-box unit testing is provided with Jest serving not only as the test framework, but also the runner and assertion library.
vue-test-utils , individual Vue components are mounted in isolation to a JSDOM environment via a wrapper based API with the
shallowMount method. Unlike
shallowMount stubs a component’s children components rather than the entire subtree.
When unit testing Vue components, deciding which areas of code should be covered by tests can be complicated:
we recommend writing tests that assert your component’s public interface … A component’s interface comprises several inputs and their corresponding outputs:
- Inputs: props, user interaction, Vuex store
- Outputs: events, rendered/updated UI, mutations, actions
A subjective but practical approach to minimise duplication when testing would be to exclude testing of any of the Vuex related features (e.g.
mapMutations ) within a
.vue SFC component, as coverage should have been provided when the store by the component’s contract.
Snapshot testing may also be a quick way of providing plenty of coverage with very few lines of test code. However, the following caveats need to be considered:
- Large snapshot files generated
- False positives/negatives
- Deterministic testing
5. Use minimal mocking
While Jest provides an excellent solution for mocking functions, modules and dependencies, relying on many mocks in a single unit signs is a likely indication of tight coupling and over-complexity of the code, and indication often described as a “code smell”. In these cases, the software could likely be broken down into smaller units.