Vue-Test-Utils 및 Vitest를 사용한 Vue-Router 시뮬레이션

Question

Vue-Router를 Vitest로 조롱하는 논리를 이해하려고 노력 중입니다.

이를 위해 매우 간단한 프로젝트에서 테스트 환경을 설정하고 시뮬레이션해 보았습니다. Vue-Test-Utils의 공식 문서를 따르려고 하면 항상 오류가 발생합니다. 그들이 Jest를 사용하기 때문인지는 모르겠습니다.

실제 vue-router를 사용하면 문제가 해결되었지만 vue-router를 모의하는 것이 더 낫다고 생각합니다.

아래에서는 먼저 프로젝트의 소스 코드를 전달한 다음 제가 받은 오류를 설명하겠습니다.

Home.vue

<스크립트 설정 lang="ts">
"vue"에서 {onMounted}를 가져옵니다;;
"vue-router"에서 {useRoute}를 가져옵니다;;

const 경로 = useRoute()

onMounted(() => {
  console.log(route.query)
})
</스크립트>

<템플릿>
  <div>홈</div>
</템플릿>

首页.spec.ts

"vitest"에서 {expect, it, vi}를 가져옵니다;;
"@vue/test-utils"에서 {mount}를 가져옵니다;;

"../src/comComponents/Home.vue"에서 홈을 가져옵니다.

it('홈 테스트', async () => {
    const 래퍼 = 마운트(홈)

    기대(래퍼.존재()).toBeTruthy()
})

vite.config.ts

/// <참조 유형="vitest" />
'vite'에서 { 정의 구성 } 가져오기
'@vitejs/plugin-vue'에서 vue 가져오기

// https://vitejs.dev/config/
기본 정의 구성 내보내기({
  플러그인: [vue()],
  시험: {
    환경: 'jsdom',
    포함: ['./test/**/*.spec.ts'],
    제외: ['node_modules', 'dist'],
    전역 : 사실
  }
})

내가 좋아하는错误消息如下：..

내가 좋아하는 방법

我尝试image下면这样模拟 vue-router

vi.mock('vue-router', () => ({
    useRoute: vi.fn(),
}))

或者只是

vi.mock('vue-router')

这是我的最终 Home.spec.ts 文件

"vitest"에서 {expect, it, vi}를 가져옵니다;;
"@vue/test-utils"에서 {mount}를 가져옵니다.

"../src/comComponents/Home.vue"에서 홈을 가져옵니다.

vi.mock('vue-라우터')

it('홈 테스트', async () => {
    const 래퍼 = 마운트(홈, {
        글로벌: {
            스텁: ["라우터-링크", "라우터-뷰"]
        }
    })

    기대(래퍼.존재()).toBeTruthy()
})

Answer 1

우선, Home.vue 中看到 router-link 或 router-view:

에서 그러기를 바랍니다. 으아아아

따라서 Home.spec.ts는 다음과 같아야 합니다.

으아아아

몇 가지 의견/제안:

• 설명을 사용하여 테스트 컨텍스트 정의
• 복제 대신 재사용하고 구성 요소를 마운트하는 전역 함수 정의
• 모니터링 및 시뮬레이션을 위해 .spyOn() 和 .mockImplementation...()를 사용하세요
• AAA [정렬, 실행, 주장] 또는 GWT [주어진, 시기, 그때]와 같은 구조적/직접적인 방법을 사용하여 테스트를 작성하세요. 몇 년 동안 테스트해 왔고 아직도 사용하고 있는데, 테스트 중인 내용을 이해하는 데 도움이 됩니다
• .toHaveBeenCalled...()를 사용하여 시뮬레이션이 예상대로 작동하는지 확인하세요
• mount() 函数中的存根应与模板中使用的组件相关（因此，如果您不使用 스텁으로 기재하면 안 됩니다)

도움이 되기를 바랍니다. 건배!