Nuxt 3 × VitestでVeeValidate 4を使用するVueファイルの単体テストを実行する
目標
- Nuxt 3プロジェクトでVeeValidate 4を使用するVueファイルの単体テストコードを作成し、Vitestによるテストを実行する。
前提
- ローカルにNuxt3のプロジェクトが作成済みであること。
※本手順書ではソースディレクトリを「src」に変更している想定としています。テストコードは「src/unitTest」に保存します。
- Vitestがインストール済みで、テストが実行できること。Vitestのインストール・テスト環境の構築手順に関しては以下を参照ください。
https://n-laboratory.jp/articles/nuxt3-vitest-unittest
- 利用するフレームワーク、ライブラリのバージョンは以下のとおりです。2023年5月13日時点での最新バージョンを利用します。
・Nuxt 3.4.3
・Vitest 0.31.0
・VeeValidate 4.9.3
・@vee-validate/i18n 4.9.3
・@vee-validate/rules 4.9.3
・flush-promises 1.0.2
目次
VeeValidateインストール
1. VeeValidateをインストールします。
$ npm install --save-dev vee-validate @vee-validate/i18n @vee-validate/rules
2. 「plugins」ディレクトリに「vee-validate-plugin.ts」を新規作成し、以下を追加します。
import { localize, setLocale } from '@vee-validate/i18n'
import ja from '@vee-validate/i18n/dist/locale/ja.json'
import AllRules from '@vee-validate/rules'
import { defineRule, configure } from 'vee-validate'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((_nuxtApp) => {
configure({
generateMessage: localize({
ja
})
})
Object.keys(AllRules).forEach((rule) => {
// すべてのルールをインポート
defineRule(rule, AllRules[rule])
})
setLocale('ja')
})
3. 「pages」ディレクトリに「form.vue」を新規作成し、以下を追加します。
<script lang="ts" setup>
import { Form, Field, ErrorMessage } from 'vee-validate'
// 送信ボタン押下時に実行される関数
const foo = (values: Record<string, any>) => {
console.log(values.email)
}
</script>
<template>
<Form v-slot="{ meta }" data-testid="validation-form" @submit="foo">
<!-- バリデーション対象の項目 -->
<Field rules="required|email" name="email" as="input" type="text" data-testid="input-email" />
<!-- バリデーションエラーメッセージの表示 -->
<ErrorMessage name="email" data-testid="email-error-msg" />
<!-- meta.validは全項目で有効な値を入力された場合にtrueを返し、無効な値を入力または初期状態はfalseを返す -->
<button :disabled="!meta.valid" data-testid="submit-btn">Submit</button>
</Form>
</template>
4. 以下のURLにアクセスします。テキストボックスと送信ボタンが表示されていることを確認します。
http://localhost:3000/form
5. テキストボックスに「test」を入力するとエラーメッセージが表示されることを確認します。
6. テキストボックスが未入力の場合にエラーメッセージが表示されることを確認します。
7. テキストボックスに「test@test.com」を入力するとエラーメッセージが表示されず、送信ボタンが活性することを確認します。
VitestでVeeValidateを利用するための初期設定
- 前項で作成したVeeValidateの設定ファイルである「vee-validate-plugin.ts」は、 Nuxtの起動時に読み込まれます。Vitest実行時はNuxtが起動しないため、VeeValidateを利用しているVueファイルのテストを実行するとエラーが発生します。
- Vitestの初期設定ファイル「setup.ts」を新規作成し、VeeValidateの設定処理を実装します。「vitest.config.ts」の「setupFiles」に「setup.ts」を指定することにより、Vitest実行時にVeeValidateの設定処理が実行され、上記事象を回避することができます。
1. 「setup.ts」を新規作成し、以下の内容を追加します。
import { localize, setLocale } from '@vee-validate/i18n'
import ja from '@vee-validate/i18n/dist/locale/ja.json'
import AllRules from '@vee-validate/rules'
import { defineRule, configure } from 'vee-validate'
// vee-validateセットアップ
configure({
generateMessage: localize({
ja
})
})
Object.keys(AllRules).forEach((rule) => {
// すべてのバリデーションルール読み込み
defineRule(rule, AllRules[rule])
})
setLocale('ja')
2. 「vitest.config.ts」の「setupFiles」に「setup.ts」のパスを追加します。
export default defineConfig({
test: {
setupFiles: './src/unitTest/setup.ts'
}
})※本手順書ではテスト用のディレクトリとして「unitTest」を作成しています。
単体テストコードの実装
- VeeValidateは非同期で実行されるため、明示的にVeeValidateのバリデーションを実行するときは、期待する状態を保証するためフラッシュする必要があります。そのため、ライブラリの「flush-promise」を使用することが公式で推奨されています。詳細は以下を参照ください。
https://vee-validate.logaretm.com/v4/guide/testing#waiting-for-async-validation
1. 「flush-promise」をインストールします。
$ npm install --save-dev flush-promises
2. 「form.spec.ts」を新規作成し、以下の内容を追加します。
import { describe, expect, test } from 'vitest'
import { fireEvent, render } from '@testing-library/vue'
import flushPromises from 'flush-promises'
import Form from '~/pages/form.vue'
describe('Form', () => {
describe('画面初期状態の確認', () => {
test('送信ボタンが非活性であること', async () => {
// Arrange
const { container } = render(Form)
// render直後はHTMLButtonElement.disabledが常にfalseを返すため、flushPromisesを使用する必要があります。
await flushPromises()
const disabled = (container.querySelector('[data-testid="submit-btn"]') as HTMLButtonElement).disabled
// Assert
expect(disabled).toBeTruthy()
})
})
describe('VeeValidateの動作確認', () => {
test.each([
['email形式', 'abc', 'emailは有効なメールアドレスではありません'],
['必須', '', 'emailは必須項目です']
])(
'Email入力欄への入力は%sであること',
async (
type, value, expectedErrorMsg
) => {
// Arrange
const { container } = render(Form)
const inputElement = container.querySelector('[data-testid="input-email"]') as HTMLInputElement
// Act
await fireEvent.update(inputElement, value)
await fireEvent.blur(inputElement)
// フラシュしないと期待した結果が得られないので注意
await flushPromises()
const actualErrorMsg = container.querySelector('[data-testid="email-error-msg"]')?.textContent
// Assert
expect(actualErrorMsg).toBe(expectedErrorMsg)
})
test('有効なEmailを入力した場合は送信ボタンが活性になること', async () => {
// Arrange
const { container } = render(Form)
const inputElement = container.querySelector('[data-testid="input-email"]') as HTMLInputElement
// Act
await fireEvent.update(inputElement, 'abc@abc.com')
await fireEvent.blur(inputElement)
await flushPromises()
const disabled = (container.querySelector('[data-testid="submit-btn"]') as HTMLButtonElement).disabled
// Assert
expect(disabled).toBeFalsy()
})
test('送信ボタンを押下した場合は送信処理が実行されること', async () => {
const submitFn = vi.fn()
// Arrange
const { container } = render(Form, { global: { mocks: { foo: submitFn } } })
const inputElement = container.querySelector('[data-testid="input-email"]') as HTMLInputElement
// Act
await fireEvent.update(inputElement, 'abc@abc.com')
await fireEvent.blur(inputElement)
await flushPromises()
await fireEvent.click((container.querySelector('[data-testid="submit-btn"]') as HTMLButtonElement))
await flushPromises()
// Assert
expect(submitFn).toHaveBeenCalledOnce()
})
})
})
3. 「form.spec.ts」のテストを実行します。全件passすることを確認します。
$ npm run test
> test
> vitest
✓ src/unitTest/form.spec.ts (5)
✓ Form (5)
✓ 画面初期状態の確認 (1)
✓ 送信ボタンが非活性であること
✓ VeeValidateの動作確認 (4)
✓ Email入力欄への入力はemail形式であること
✓ Email入力欄への入力は必須であること
✓ 有効なEmailを入力した場合は送信ボタンが活性になること
✓ 送信ボタンを押下した場合は送信処理が実行されること
Test Files 1 passed (1)
Tests 5 passed (5)※本手順書では「package.json」の「scripts」に以下が追加されている想定としています。
{
"scripts": {
"test": "vitest",
},
}
以上で全ての手順は完了になります