Vue.js 2 Design Patterns and Best Practices

Vue options

We can set our own options on a Vue instance. Let's use vue-test-utils to set our own data on the instance and see whether this data is being rendered on screen:

describe('TodoList.vue', () => {  it('should contain a list of Todo items', () => {    const todos = [{ id: 1, name: 'Wash the dishes' }];    const wrapper = mount(TodoList, {      data: { todos },    });    // Find the list items on the page    const liWrapper = wrapper.find('li').text();    // List items should match the todos item in data    expect(liWrapper).toBe(todos[0].name);  });});

As we can see, we're now testing against the items rendered on the screen based on the data option within our component.

Let's add a TodoItem component so that we can render a component with a todo prop dynamically. ...