How to Unit Test a Method in a Vue.js Component using jest

Calling component method

The wrapper provides access to the component instance via its vm property, so you could call the method directly with:

wrapper.vm.doSomeWork()

Setting props

• The mounting options (passed to shallowMount() or mount()) include the propsData property that could be used to initialize the component's props before mounting.
• You could also use the wrapper's setProps() after the component has already been mounted.

Example:

it('...', () => {  const wrapper = shallowMount(MyComponent, {    propsData: {      myItems: [        { id: 200, bar: false },        { id: 300, bar: false }      ]    }  });  // OR  wrapper.setProps({    myItems: [      { id: 400: bar: true }    ]  })})

Modifying component data property

• The mounting options includes the data property that could be used to initialize the component's data before mounting.
• You could also use the wrapper's setData() after the component has already mounted.
• You could access the component's data property directly through the wrapper's vm property.

Example:

it('...', () => {  const wrapper = shallowMount(MyComponent, {    data() {      return {        foo: 1      }    }  });  // OR  wrapper.setData({ foo: 2 })  // OR  wrapper.vm.foo = 3})

Full example

Altogether, your test might look similar to this:

import { createLocalVue, shallowMount } from '@vue/test-utils'import MyComponent from '@/components/MyComponent'describe('MyComponent', () => {  it('When foo is set to -something-, set bar to true', () => {    const myItems = [      { id: 200, bar: false },      { id: 300, bar: false }    ]    const localVue = createLocalVue()    const wrapper = shallowMount(MyComponent, {      localVue,      propsData: {        myItems      }    })    wrapper.vm.foo = 'something'    wrapper.vm.doSomeWork()    expect(myItems[0].bar).toBe(true)  })})

demo