Nuxt 3 × Piniaでストアの単体テストを実行する

$ npm install pinia @pinia/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    ['@pinia/nuxt',
      {
        autoImports: [
          // defineStoreの自動インポート
          'defineStore',
        ],
        // vuexも併用する場合は以下を追加
        // disableVuex: false ,
      },
    ],
  ],
});

// stores/user.ts
// nuxt.config.tsのautoImportsにdefineStoreを追加している場合はこのimport文は不要です。
import { defineStore } from 'pinia'

type UserState = {
  email: string,
  password: string
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    // ユーザーの定義・初期化
    email: '',
    password: ''
  }),
  actions: {
    // ユーザー情報の更新
    setUserInfo (email: string, password: string) {
      this.email = email
      this.password = password
    }
  }
})

// pages/store.vue
<script lang="ts" setup>
import { useUserStore } from '~/stores/user'

// storeの取得
const userStore = useUserStore()

// emailの取得
const email = userStore.email

// passwordの取得
const password = userStore.password

// ユーザー情報の更新
userStore.setUserInfo("new email", "new password")
</script>
<template>
  <p>Email: {{ email }}</p>
  <p>Password: {{ password }}</p>
</template>

Error: [🍍]: "getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

import { setActivePinia, createPinia } from 'pinia'

beforeEach(() => {
  setActivePinia(createPinia())
})

// src/unitTests/user.spec.ts
import { beforeEach, describe, expect, test } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'
import { useUserStore } from '~/stores/user'

const initialUser = {
  email: '',
  password: ''
}
const updatedUser = {
  email: 'new email',
  password: 'new password'
}

describe('Stores/user', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  test('ストアのユーザー情報が初期化されていること', () => {
    // Arrange
    const user = useUserStore()

    // Assert
    expect(user.email).toBe(initialUser.email)
    expect(user.password).toBe(initialUser.password)
  })

  test('setUserInfoを呼び出した場合、ストアのユーザー情報が更新されること', () => {
    // Arrange
    const user = useUserStore()

    // Act
    user.setUserInfo(updatedUser.email, updatedUser.password)

    // Assert
    expect(user.email).toBe(updatedUser.email)
    expect(user.password).toBe(updatedUser.password)
  })
})

$ npm run test
> test
> vitest
 ✓ src/unitTests/user.spec.ts (2)
   ✓ Stores/user (2)
     ✓ ストアのユーザー情報が初期化されていること
     ✓ setUserInfoを呼び出した場合, ストアのユーザー情報が更新されること
 Test Files  1 passed (1)
      Tests  2 passed (2)

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

$ npm install --save-dev @pinia/testing

// pages/store.vue
<script lang="ts" setup>
import { useUserStore } from '~/stores/user'

// storeの取得
const userStore = useUserStore()

// emailの取得
const email = userStore.email

// passwordの取得
const password = userStore.password
</script>
<template>
  <p>Email: {{ email }}</p>
  <p>Password: {{ password }}</p>
</template>

// src/unitTests/store.spec.ts
import { beforeEach, describe, expect, test } from 'vitest'
import { render, screen } from '@testing-library/vue'
import { setActivePinia, createPinia } from 'pinia'
import { createTestingPinia } from '@pinia/testing'
import Store from '~/pages/store.vue'

describe('Store', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  })

  test('emailとpasswordが表示されること', () => {
    // Arrange
    render(Store, {
      global: {
        plugins: [
          createTestingPinia({
            // storeのuserの初期値を設定
            initialState: {
              user: {
                email: 'Initial email',
                password: 'Initial password'
              },
            },
          }),
        ],
      },
    })

    // Assert
    expect(screen.getByText('Email: Initial email')).toBeTruthy()
    expect(screen.getByText('Password: Initial password')).toBeTruthy()
  })
})

$ npm run test
> test
> vitest
 ✓ src/unitTests/store.spec.ts (1)
   ✓ Store (1)
     ✓ emailとpasswordが表示されること
 Test Files  1 passed (1)
      Tests  1 passed (1)