Piniaを使ったコンポーネントのテスト

環境

Vue3
TypeScript

導入

npm install --save-dev @pinia/testing

記述

import { setActivePinia, createPinia } from 'pinia'
import { useHogeStore } from 'src/stores/hogeStore'
import { createTestingPinia } from '@pinia/testing'

discribe('hogeComponent', () => {
  beforeEach(() => {
    setActivePinia(createPinia())
  }

 it('hoge test', () => {
    const hogeStoreInit = {hoge: 'hoge', fuga: 'fuga'}
    const wrapper = mount(HogeComponent, {
      global: {
        plugins: [
          createTestingPinia({initialState: hogeStoreInit})
        ]
      }
    }
    const hogeStore = useHogeStore()

    expect(hogeStore.hoge).toBe('hoge')
    expect(hogeStore.fuga).toBe('fuga')
  }
}

参考