Vue.js 2 Design Patterns and Best Practices

Writing tests

Inside the src/components folder, make a new folder named __tests__ and then create a file named TodoList.spec.js. Jest will automatically find this folder and subsequent tests.

Let's first import our component and the mount method from the test utilities:

import { mount } from 'vue-test-utils';import TodoList from '../TodoList';

The mount method allows us to test our TodoList component in isolation and gives us the ability to mock any input props, events, and even outputs. Next, let's create a describe block that we'll use to contain our test suite:

describe('TodoList.vue', () => {});

Let's now mount the component and gain access to the Vue instance:

describe('TodoList.vue', () => { // Vue instance can be accessed at wrapper.vm ...