Vue.js 3のテスト実装入門：VitestとTest Utilsで始めるユニット・コンポーネントテスト

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm install -D vitest @vue/test-utils jsdom

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'jsdom',
    globals: true,
  },
})

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

// useCounter.ts
import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
}

// useCounter.spec.ts
import { useCounter } from './useCounter'
import { describe, it, expect } from 'vitest'

describe('useCounter', () => {
  it('初期値は0であること', () => {
    const { count } = useCounter()
    expect(count.value).toBe(0)
  })

  it('incrementで値が増加すること', () => {
    const { count, increment } = useCounter()
    increment()
    expect(count.value).toBe(1)
  })
})

<!-- Counter.vue -->
<template>
  <div>
    <p data-testid="count">Count: {{ count }}</p>
    <button @click="increment">+</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => count.value++
</script>

// Counter.spec.ts
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
import { describe, it, expect } from 'vitest'

describe('Counter.vue', () => {
  it('初期値が表示されていること', () => {
    const wrapper = mount(Counter)
    expect(wrapper.get('[data-testid="count"]').text()).toBe('Count: 0')
  })

  it('ボタンクリックでカウントアップすること', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.get('[data-testid="count"]').text()).toBe('Count: 1')
  })
})

// api.ts
export async function fetchUser() {
  const res = await fetch('/api/user')
  return res.json()
}

// api.spec.ts
import * as api from './api'
import { describe, it, expect, vi } from 'vitest'

describe('fetchUser', () => {
  it('モックされたユーザーデータを返す', async () => {
    vi.spyOn(api, 'fetchUser').mockResolvedValue({ name: 'Taro' })
    const user = await api.fetchUser()
    expect(user.name).toBe('Taro')
  })
})

// login.cy.js
describe('ログイン画面', () => {
  it('正しい資格情報でログインできる', () => {
    cy.visit('/login')
    cy.get('input[name="email"]').type('test@example.com')
    cy.get('input[name="password"]').type('password123')
    cy.get('button[type="submit"]').click()
    cy.url().should('include', '/dashboard')
  })
})