何ミリ秒か待ってからテストする | Vuex + vue-test-utils その0005

はじめに

Vue.nextTick()を使ってDOMを更新して解決できるようなことは、Vue.nextTick()を使うのが良いと思います。

実装上setTimeout()を使っている箇所があったので、テストコードでも100ミリ秒待ってから実行するなどしました。

Vue.nextTick()で非同期に更新されるDOMのテストについては以下の記事に書きました。

stateの更新に伴うDOMの更新を待ってからテストする(非同期処理で更新されるstateのテスト) | Vuex + vue-test-utils その0004 - Motomichi Works Blog

wait_millisecond.jsの作成とその記述内容

wait_millisecond.jsを作成して以下の通り記述しました。

export default async function waitMillisecond (num) {
  function wait (num) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('resolved');
      }, num);
    });
  };

  const message = await wait(num);
  return message;
};

hoge.spec.jsの作成とその記述内容

import waitMillisecond from '@/path/to/wait_millisecond.js';

〜略〜

describe('サンプル', () => {
  it('サンプル', async () => {
    〜略〜

    // 100ミリ秒待つ
    await waitMillisecond(100).then((message) => {
      // resolved
      console.log(message);
    });

    // テストする
    expect(example).toBe('hoge');
  });
});