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 (vite)にAmplifyを導入するまでにやったこと

Amplifyを導入する為に必要な @aws-amplify/cli をインストール後、必要な設定を行います。 # ampl

【Nuxt3】便利な新機能とサンプルアプリのご紹介です

まもなく、2022年6月に安定板がリリース予定のNuxt3 を利用して、実務レベルのアプリケーション開発にどこまで利用できるのか検

Nuxt.js&Typescript&ESListを利用したボイラープレート

Nuxt.js & Typescript & ESList を利用したボイラープレートを作成しましたので公開します。

Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

作成したアプリケーション デモ Nuxt3 & Vuetify で作成しており、TailwindCSS も利用