Nuxt3 (Vue3)にJest (vitest)を導入するまでにやったこと

フロントエンドのテストフレームワークとして、 jest がよく利用されますが Nuxt3 では、vitest を利用することで同等のことが実現できるようです。

# Nuxt3 (vite) では、jest の替わりに vitest を利用します
yarn add -D vitest @vue/test-utils

Vitest では、jest.config.ts の代わりに vitest.config.ts というファイルに設定を記述していきます。

vitest.config.ts

/// <reference types="vitest" />

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

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

package.json

"scripts": {
    "test": "vitest --run",
    "test:coverage": "vitest run --coverage",
},

src/components/Pages/Logo.vue

<template>
  <NuxtLink :to="Url.TOP">
    <v-toolbar-title > amplify-nuxt3-sample </v-toolbar-title>
  </NuxtLink>
</template>

<script setup lang="ts">
import { Url } from '@/constants/url'
</script>

src/tests/components/Pages/Logo.test.ts

import { mount } from '@vue/test-utils'
import { test, expect } from 'vitest'
import Logo from '@/components/Pages/Logo.vue'

test('Logo', () => {
  const wrapper = mount(Logo, {})
  expect(wrapper.element).toMatchSnapshot()
})

【最速】Nuxt3 を検証！ボイラープレートを作りました