Vitsetを使ってVue.jsのCompositionAPIのテストを行う
TOC
Vue3のComposition APIのテスト環境の手段として、Vitest、およびvue-test-utilsを組み合わせて、テストを実装する方法を紹介します。
環境構築
必要なパッケージのインストール
必要なパッケージをインストールします。
npm install --save-dev @vue/test-utils vite-plugin-testing @vitest/dev-utilsComposition APIを使用したサンプルコンポーネントの作成
次にHelloWorld.vueというサンプルコンポーネントを作成します。
<template>
<div>
<p>Hello, {{ name }}!</p>
</div>
</template>
<script>
import { ref, toRefs } from 'vue';
export default {
props: {
greetingName: {
type: String,
default: 'World'
}
},
setup(props) {
const { greetingName } = toRefs(props);
const name = ref(greetingName.value);
return { name };
}
};
</script>vue-test-utilsとVitestを使ったテストコードの実装
HelloWorld.spec.ts
import { mount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
describe('HelloWorld.vue', () => {
it('renders props.greetingName when passed', async () => {
const wrapper = mount(HelloWorld, {
props: { greetingName: 'Alice' }
});
await wrapper.vm.$nextTick();
expect(wrapper.text()).tobe(`Hello, Alice!`);
});
it('renders default name when no props are passed', async () => {
const wrapper = mount(HelloWorld);
await wrapper.vm.$nextTick();
expect(wrapper.text()).tobe('Hello, World!');
});
});mount()
- vue-test-utilsで提供される関数で、Vueコンポーネントをマウント（実際にレンダリング）します。
- この関数を使用すると、テスト環境内でコンポーネントの実際の状態や動作を検証できます。
wrapper.vm.$nextTick()
- Vueのインスタンスメソッドで、次のDOM更新サイクルでのコールバックを遅延するために使用されます。
- Vueは非同期にDOMを更新します。このメソッドは、DOMの更新を待ってからテストアサーションを実行するのに役立ちます。 例えば、プロパティの変更後、DOMが即座に更新されない場合に、これを使用してDOMが正しく更新されたことを確認するための待機を挟むことができます。
wrapper.text()
- vue-test-utilsで提供されるWrapperオブジェクトのメソッドの一つです。
- このメソッドは、マウントされたコンポーネントのテキストコンテンツを取得します。具体的には、Wrapperの内部のエレメントのtextContentを返すことになります。
- コンポーネントのレンダリング結果を文字列として取得し、その結果が期待通りであるかをテストする際に非常に役立ちます。
テストの実行
以下のコマンドでテストを実行します。
npx vitest上記のツールの組み合わせを活用することで、効率的かつ簡潔なテストコードの実装が可能となります。
Search Posts