Nuxt 3 × Vitest × Vue Testing Libraryで単体テストの実行とカバレッジを取得する

$ npm install --save-dev vitest @testing-library/user-event @testing-library/vue happy-dom

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

export default defineConfig({
  plugins: [
    Vue(),
  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'),
      '@': path.resolve(__dirname, './src')
    }
  },
  test: {
    globals: true,
    environment: 'happy-dom'
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  srcDir: 'src/'
});

{
  "config": {
    "path": "./src/unitTest/index.spec.ts"
  },
  "scripts": {
    "test:all": "vitest",
    "test:linux": "vitest $npm_package_config_path",
    "test:win": "vitest %npm_package_config_path%"
  },
}

$ npm run test:all

Windowsの場合 $ npm run test:win
Linux/Macの場合   $ npm run test:linux

$ cd src
$ mkdir unitTest

import { describe, expect, test } from 'vitest'
import { render, screen } from '@testing-library/vue'
import Index from '~/pages/index.vue'

describe('Index', () => {
  test('Indexページにタイトルが表示されていること', () => {
    // Arrange
    render(Index)

    // Assert
    expect(screen.getByText('Pages/index.vue')).toBeTruthy()
  })
})

<template>
  <h1>
    Pages/index.vue
  </h1>
</template>

$ npm run test:all
> test:all
> vitest
 ✓ src/unitTest/index.spec.ts (1)
   ✓ Index (1)
     ✓ Indexページにタイトルが表示されていること
 Test Files  1 passed (1)
      Tests  1 passed (1)

<template>
  <button>ボタン</button>
</template>

<script lang="ts" setup>
// Nuxtが自動インポートするref関数を追加
const isClicked = ref(false)
const handleClick = () => {
  isClicked.value = true
}
</script>
<template>
  <!-- Nuxtが自動インポートするコンポーネントを追加 -->
  <Button @click="handleClick" />
  <p v-if="isClicked">
    Clicked!
  </p>
</template>

import { describe, expect, test } from 'vitest'
import { render, screen } from '@testing-library/vue'
import userEvent from '@testing-library/user-event'
import Index from '~/pages/index.vue'

describe('Index', () => {
  test('ボタンをクリックすると画面に文言が表示されていること', async () => {
    // Arrange
    const user = userEvent.setup()
    render(Index)

    // Act
    await user.click(screen.getByText('ボタン'))

    // Assert
    expect(screen.getByText('Clicked!')).toBeTruthy()
  })
})

$ npm run test:all
> test:all
> vitest
stderr | src/unitTest/index.spec.ts > Index > Indexページにタイトルが表示されていること
[Vue warn]: Failed to resolve component: Button
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯
 FAIL  src/unitTest/index.spec.ts > Index > Indexページにタイトルが表示されていること
ReferenceError: ref is not defined
 ❯ setup src/pages/index.vue:2:19
      1| <script lang="ts" setup>
      2| const isClicked = ref(false)
       |                   ^

$ npm install --save-dev unplugin-auto-import unplugin-vue-components

// import文を追加
import AutoImportFunctions from 'unplugin-auto-import/vite'
import AutoImportComponents from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Vue(),
     // 以下を追加
    AutoImportFunctions (
      {
        // インポートするライブラリにはプリセットが用意されています
        // https://github.com/antfu/unplugin-auto-import/tree/main/src/presets
        imports: [
          'vue',
          'vee-validate',
          'vue-router',
          'pinia',
        ],
        dts: 'auto-imports.d.ts'
      }
    ),
    AutoImportComponents({
      // ソースディレクトリをsrcに変更している想定なのでここではsrc/componentsとしています
      dirs: ['src/components'],
      dts: '.nuxt/components.d.ts',
    }),
  ],
})

export default defineConfig({
  plugins: [
    Vue(),
    AutoImportFunctions ({
      imports: [
        {
          '@vueuse/core': [
            'useMouse', // = import { useMouse } from '@vueuse/core',
          ],
        }
      ]
    })
  ],
})

$ npm run test:all
 ✓ src/unitTest/index.spec.ts (1)
   ✓ Index (1)
     ✓ ボタンをクリックすると画面に文言が表示されていること
 Test Files  1 passed (1)
      Tests  1 passed (1)

$ npm install --save-dev @vitest/coverage-v8

export default defineConfig({
  test: {
    // 以下を追加
    coverage: {
      provider: 'v8',
      include: ['src/**/*.{vue,js,ts}'],    // src配下の特定の拡張子のファイルのみをテスト対象に設定
      all: true,                            // 未テストのコードもカバレッジの対象にする
      reporter: ['html', 'clover', 'text']
    },
    root: '.',
    reporters: ['verbose'],
  }
});

{
  "scripts": {
    "test:all": "vitest --coverage",
    "test:linux": "vitest --coverage $npm_package_config_path",
    "test:win": "vitest --coverage %npm_package_config_path%"
  },
}

$ npm run test:all
> test:all
> vitest --coverage
 ✓ src/unitTest/index.spec.ts (1)
   ✓ Index (1)
     ✓ ボタンをクリックすると画面に文言が表示されていること
 Test Files  1 passed (1)
      Tests  1 passed (1)
 % Coverage report from v8
-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
-------------|---------|----------|---------|---------|-------------------
All files    |     100 |      100 |     100 |     100 | 
 components  |     100 |      100 |     100 |     100 | 
  Button.vue |     100 |      100 |     100 |     100 | 
 pages       |     100 |      100 |     100 |     100 | 
  index.vue  |     100 |      100 |     100 |     100 | 
-------------|---------|----------|---------|---------|-------------------