Nuxt 3 × VitestでVeeValidate 4の単体テストを実装する

$ npm install --save-dev vee-validate @vee-validate/i18n @vee-validate/rules

// plugins/vee-validate-plugin.ts
import { localize, setLocale } from '@vee-validate/i18n'
import ja from '@vee-validate/i18n/dist/locale/ja.json'
import { all } from '@vee-validate/rules'
import { defineRule, configure } from 'vee-validate'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((_nuxtApp) => {
  configure({
    generateMessage: localize({
      // エラーメッセージの日本語化
      ja,
    }),
  })

  // すべてのルールをインポート
  Object.entries(all).forEach(([name, rule]) => {
    defineRule(name, rule)
  })

  // エラーメッセージの日本語化
  setLocale('ja')
})

// pages/form.vue
<script lang="ts" setup>
import { Form, Field, ErrorMessage } from 'vee-validate'

// 送信ボタン押下時に実行される関数
const handleSubmit = (values: Record<string, string>) => {
  console.log(values.email)
}
</script>

<template>
  <Form v-slot="{ meta }" @submit="handleSubmit">
    <!-- バリデーション対象の項目 -->
    <Field rules="required|email" name="email" as="input" type="text" placeholder="email" />
    <!-- バリデーションエラーメッセージの表示 -->
    <ErrorMessage name="email" />
    <!-- meta.validは全項目で有効な値を入力された場合にtrueを返し、無効な値を入力または初期状態はfalseを返す -->
    <button :disabled="!meta.valid">Submit</button>
  </Form>
</template>

mkdir unitTests

// unitTests/setup.ts
import { localize, setLocale } from '@vee-validate/i18n'
import ja from '@vee-validate/i18n/dist/locale/ja.json'
import { all } from '@vee-validate/rules'
import { defineRule, configure } from 'vee-validate'

// vee-validate setup
configure({
  generateMessage: localize({
    // エラーメッセージの日本語化
    ja,
  }),
})

// すべてのルールをインポート
Object.entries(all).forEach(([name, rule]) => {
  defineRule(name, rule)
})

// エラーメッセージの日本語化
setLocale('ja')

// vitest.config.ts
export default defineConfig({
  test: {
    // テスト実行時に以下で指定したファイルが読み込まれます。
    setupFiles: './unitTests/setup.ts'
  }
})

// unitTests/form.spec.ts
import { describe, expect, test, vi } from 'vitest'
import { render, screen, waitFor } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import Form from '~/pages/form.vue'

describe('Form', () => {
  describe('画面初期状態の確認', () => {
    test('送信ボタンが非活性であること', async () => {
      // Arrange
      render(Form)

      await waitFor(() => {
        // Assert
        const isDisabled = (screen.getByRole('button') as HTMLButtonElement).disabled
        expect(isDisabled).toBe(true)
      })
    })
  })

  describe('vee-validateの動作確認', () => {
    test('emailは入力必須の項目であること', async () => {
      // Arrange
      const user = userEvent.setup()
      render(Form)
      const inputElement = screen.getByPlaceholderText('email')

      // Act
      await user.type(inputElement, '{Tab}')

      // Assert
      expect(screen.getByText('emailは必須項目です')).toBeTruthy()
    })

    test('emailの入力は有効なメールアドレス形式であること', async () => {
      // Arrange
      const user = userEvent.setup()
      render(Form)
      const email = screen.getByPlaceholderText('email')

      // Act
      await user.type(email, 'abc{Tab}')

      // Assert
      expect(screen.getByText('emailは有効なメールアドレスではありません')).toBeTruthy()
    })

    test('有効なemailを入力した場合は、送信ボタンが活性になること', async () => {
      // Arrange
      const user = userEvent.setup()
      render(Form)

      // Act
      await user.type(screen.getByPlaceholderText('email'), 'abc@abc.com')

      await waitFor(() => {
        // Assert
        const isDisabled = (screen.getByRole('button') as HTMLButtonElement).disabled
        expect(isDisabled).toBe(false)
      })
    })

    test('送信ボタンを押下した場合は、送信処理が実行されること', async () => {
      // Arrange
      const user = userEvent.setup()
      const handleSubmitMock = vi.fn()
      render(Form, {
        global: {
          mocks: {
            handleSubmit: handleSubmitMock
          },
        }
      })
      await user.type(screen.getByPlaceholderText('email'), 'abc@abc.com')

      // Act
      await user.click(screen.getByRole('button'))

      await waitFor(() => {
        // Assert
        expect(handleSubmitMock).toHaveBeenCalledOnce()
      })
    })
  })
})

$ npm run test
> test
> vitest
 ✓ unitTests/form.spec.ts
   ✓ Form (5) 529ms
     ✓ 画面初期状態の確認 (1)
       ✓ 送信ボタンが非活性であること
     ✓ vee-validateの動作確認 (4) 495ms
       ✓ emailは入力必須の項目であること
       ✓ emailの入力は有効なメールアドレス形式であること
       ✓ 有効なemailを入力した場合は、送信ボタンが活性になること
       ✓ 送信ボタンを押下した場合は、送信処理が実行されること
 Test Files  1 passed (1)
      Tests  5 passed (5)

{
  "scripts": {
    "test": "vitest",
  },
}