Vue.js + Jest 非同期通信のテスト

もう 1 つの解決策は async function と npm パッケージの flush-promises を使用することです。flush-promises は堰き止められている resolve された Promise ハンドラを流します。堰き止められている Promise を流すこととテストの可読性を改善するために await を flushPromises の呼び出しの前に置きます。

import { shallowMount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import Foo from './Foo'
jest.mock('axios')

it('fetches async when a button is clicked', async () => {
  const wrapper = shallowMount(Foo)
  wrapper.find('button').trigger('click')
  await flushPromises()
  expect(wrapper.vm.value).toBe('value')
})

非同期動作のテスト | Vue Test Utils

flush-promises の実装

シンプルな実装だった。

var scheduler = typeof setImmediate === 'function' ? setImmediate : setTimeout;

function flushPromises() {
  return new Promise(function(resolve) {
    scheduler(resolve);
  });
}

module.exports = flushPromises;

参考