Async Vue Test Utils Example

test.spec.js

import { shallowMount } from '@vue/test-utils'
import MessageToggle from '@/components/MessageToggle.vue'
import Message from '@/components/Message'

// Define the test method to be prefixed with `async`
describe('MessageToggle.vue', async () => {
  it('toggles msg passed to Message when button is clicked', () => {
    const wrapper = shallowMount(MessageToggle)
    const button = wrapper.find('#toggle-message')
    button.trigger('click')
    // Button click triggers an async operation which will not resolve in the current "Tick"
    
    // Await the next "Tick" before making assertions.
    await wrapper.nextTick()
    const MessageComponent = wrapper.find(Message)
    expect(MessageComponent.attributes().msg).toEqual('message')
    button.trigger('click')
    expect(MessageComponent.attributes().msg).toEqual('toggled message')
  })
})