参考にさせていただいたページ
vue-test-utils公式(英語)
vue-test-utils公式(日本語)
Vue.nextTick()について Vue.js公式 (v2.x)
awaitについて
サンプルコード
サンプルとしては、上記した公式ドキュメントを確認していただくのが確実だと思います。
DOMの更新を待ってテストを実行するにはVue.nextTick()を使う。またはVue.nextTick()にasync awaitも組み合わせて使うということになります。
特に はじめる | Vue Test Utils や 非同期動作のテスト | Vue Test Utils を見るのが良いと思います。
await nextTick()の処理完了を1度待つ
以下のコードはhoge.spec.jsの一部を抜粋したものと考えてください。
// async functionキーワードで関数を定義します。
async function getHoge() {
const button = wrapper.find('.button');
button.trigger('click');
// await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
await Vue.nextTick(() => {
console.log('DOM updated');
});
// ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
console.log('find DOM');
const hoge = wrapper.find('.hoge');
return hoge;
}
describe('サンプル', () => {
it('サンプル', () => {
// Promiseを返す関数の戻り値は必ずreturnしてください。returnしないとテスト結果判定ができず、全て成功扱いになってしまいます。
return getHoge().then((hoge) => {
// hogeをテストします。
})
});
});
await nextTick()の処理完了を2度待つ
テスト対象が表示されるまでに複数回DOMの更新をしたいときがあると思います。
そんなときのためのサンプルです。
以下のコードはhoge.spec.jsの一部を抜粋したものと考えてください。
// async functionキーワードで関数を定義します。
async function getHoge() {
const button = wrapper.find('.button');
button.trigger('click');
// await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
await Vue.nextTick(() => {
console.log('DOM updated');
});
// ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
console.log('1度待った');
// もう一度await演算子でVue.nextTickに渡したコールバック処理の完了を待ちます。
await Vue.nextTick(() => {
console.log('DOM updated');
});
// ここから下はawait演算子をつけたVue.nextTick()のコールバック処理が完了してから実行されます。
console.log('2度待った');
console.log('find DOM');
const hoge = wrapper.find('.hoge');
return hoge;
}
describe('サンプル', () => {
it('サンプル', () => {
// Promiseを返す関数の戻り値は必ずreturnしてください。returnしないとテスト結果判定ができず、全て成功扱いになってしまいます。
return getHoge().then((hoge) => {
// hogeをテストします。
})
});
});
