Pinia와 Vue3 통합 테스트

나는 Vue 3에 의존하는 구성 요소에 대해 vue test utils과의 통합 테스트를 작성해야 하는 Pinia 프로젝트에서 작업하고 있었고 동시에 해당 구성 요소를 마운트하기 전에 Pinia 저장소에 일부 초기 상태를 설정해야 했습니다. . 이로 인해 문제가 발생했습니다.

Pinia 저장소가 구성되기 전에 구성 요소를 마운트할 수 없습니다.

구성 요소를 마운트하기 전에 Pinia 저장소를 구성할 수 없습니다. Read why in this paragraph of the official docs of vue test utils .

한 가지 해결책은 구성 요소가 탑재할 때 저장소에 의존하지 않도록 코드를 리팩터링하는 것입니다. 그러나 그것은 너무 많은 작업이 될 것이고 우리 코드베이스에 너무 제한적일 것입니다. 구성 요소 수명 주기 후크의 저장소에 대한 액세스를 제한할 필요가 없습니다!

따라서 이 게시물에서는 통합 테스트를 위해 특별히 설계된 래퍼 구성 요소 내부에 구성 요소를 렌더링하는 또 다른 솔루션이 제시됩니다.
IntegrationTestWrapper.vue

<script setup lang="ts">
import { useMyStore } from '@/stores/myStore'

// === setup any Pinia stores here ===
useMyStore().$patch({ foo: 'bar' })
// ======

defineProps(['Component'])
</script>

<template lang="pug">
component(:is="Component")
</template>

그런 다음 테스트 내부에서 다음과 같이 작성할 수 있습니다.
MyComponent.spec.ts

import { flushPromises, mount } from '@vue/test-utils'
import { createPinia } from 'pinia'

describe('MyComponent', () => {
  it('should mount', async () => {
    const wrapper = await mount(IntegrationTestWrapper, {
      props: {
        Component: MyComponent, 
        anotherProp: 'abc', // will be passed to child component
      },
      global: {
        plugins: [createPinia()], // initializes Pinia
      },
    })
    await flushPromises() // make sure all promises in lifecycle hooks are resolved
    expect(wrapper.exists()).toBe(true)
    // further assertions
  })
})

이제 모든 것이 올바른 순서로 수행됩니다.

IntegrationTestWrapper가 마운트되기 전에 Pinia가 생성되고 초기화됩니다.

IntegrationTestWrapper 마운트하기 전에 저장소 상태를 초기화합니다MyComponent.

IntegrationTestWrapper에게 주어진 소품은 MyComponent에게 전달됩니다.

메모:

IntegrationTestWrapper는 소품을 받지 않기 때문에 slot을 렌더링하지 않습니다.

저장 상태를 구성하기 전에 createPinia()를 호출할 수 없습니다. Pinia가 app.use()로 초기화되지 않았다는 오류가 표시됩니다. 마운트 옵션을 통한 테스트에서만 초기화됩니다.