Vue-Test-Utils 및 Vitest를 사용한 Vue-Router 시뮬레이션
<p>Vue-Router를 Vitest로 조롱하는 논리를 이해하려고 노력 중입니다. </p>
<p>이를 위해 매우 간단한 프로젝트에서 테스트 환경을 설정하고 시뮬레이션해 보았습니다. Vue-Test-Utils의 공식 문서를 따르려고 하면 항상 오류가 발생합니다. 그들이 Jest를 사용하기 때문인지는 모르겠습니다. </p>
<p>실제 vue-router를 사용하면 문제가 해결되었지만 vue-router를 모의하는 것이 더 낫다고 생각합니다. </p>
<p> 아래에서는 먼저 프로젝트의 소스 코드를 전달한 다음 제가 받은 오류를 설명하겠습니다. </p>
<h3>Home.vue</h3>
<pre class="brush:php;toolbar:false;"><스크립트 설정 lang="ts">
"vue"에서 {onMounted}를 가져옵니다;;
"vue-router"에서 {useRoute}를 가져옵니다;;
const 경로 = useRoute()
onMounted(() => {
console.log(route.query)
})
</스크립트>
<템플릿>
<div>홈</div>
</템플릿></pre>
<h3>首页.spec.ts</h3>
<pre class="brush:php;toolbar:false;">"vitest"에서 {expect, it, vi}를 가져옵니다;;
"@vue/test-utils"에서 {mount}를 가져옵니다;;
"../src/comComponents/Home.vue"에서 홈을 가져옵니다.
it('홈 테스트', async () => {
const 래퍼 = 마운트(홈)
기대(래퍼.존재()).toBeTruthy()
})</pre>
<h3>vite.config.ts</h3>
<pre class="brush:php;toolbar:false;">/// <참조 유형="vitest" />
'vite'에서 { 정의 구성 } 가져오기
'@vitejs/plugin-vue'에서 vue 가져오기
// https://vitejs.dev/config/
기본 정의 구성 내보내기({
플러그인: [vue()],
시험: {
환경: 'jsdom',
포함: ['./test/**/*.spec.ts'],
제외: ['node_modules', 'dist'],
전역 : 사실
}
})</pre>
<h3>내가 좋아하는错误消息如下：..</h3>
<h3>내가 좋아하는 방법</h3>
<p>我尝试image下면这样模拟 vue-router</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router', () => ({
useRoute: vi.fn(),
}))</pre>
<p>或者只是</p>
<pre class="brush:php;toolbar:false;">vi.mock('vue-router')</pre>
<h4>这是我的最终 Home.spec.ts 文件</h4>
<pre class="brush:php;toolbar:false;">"vitest"에서 {expect, it, vi}를 가져옵니다;;
"@vue/test-utils"에서 {mount}를 가져옵니다.
"../src/comComponents/Home.vue"에서 홈을 가져옵니다.
vi.mock('vue-라우터')
it('홈 테스트', async () => {
const 래퍼 = 마운트(홈, {
글로벌: {
스텁: ["라우터-링크", "라우터-뷰"]
}
})
기대(래퍼.존재()).toBeTruthy()
})</pre></p>
