使用 Vue-Test-Utils 和 Vitest 进行 Vue-Router 模拟-PHP中文网问答

我试图理解用 Vitest 模拟 Vue-Router 的逻辑。

为此，我尝试在一个非常简单的项目上设置并模拟我的测试环境。当我尝试按照Vue-Test-Utils的官方文档进行操作时，总是出现错误。我不知道是不是因为他们使用 Jest。

使用真正的 vue-router 解决了我的问题，但我认为模拟 vue-router 更好。

下面我先传达一下项目的源码，然后是我收到的错误。

首页.vue

首页.spec.ts

import {expect, it, vi} from "vitest"; import {mount} from "@vue/test-utils"; import Home from "../src/components/Home.vue" it('Home Test', async () => { const wrapper = mount(Home) expect(wrapper.exists()).toBeTruthy() })

vite.config.ts

///  import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], test: { environment: 'jsdom', include: ['./test/**/*.spec.ts'], exclude: ['node_modules', 'dist'], globals: true } })

我的错误消息如下：..

我尝试过的方法

我尝试像下面这样模拟 vue-router

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

或者只是

vi.mock('vue-router')

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

import {expect, it, vi} from "vitest"; import {mount} from "@vue/test-utils"; import Home from "../src/components/Home.vue" vi.mock('vue-router') it('Home Test', async () => { const wrapper = mount(Home, { global: { stubs: ["router-link", "router-view"] } }) expect(wrapper.exists()).toBeTruthy() })

import { expect, it, vi } from 'vitest'; import { mount } from '@vue/test-utils'; import * as VueRouter from 'vue-router'; import Home from '../src/components/Home.vue'; describe('./path/to/Home.vue', () => { const useRouteSpy = vi.spyOn(VueRouter, 'useRoute'); const getWrapper = () => mount(Home as any, { global: { stubs: { 'router-link': { template: '

' }, 'router-view': { template: '

' }, }, }, }); it('the component should be mounted', () => { // ARRANGE const useRouteMock = useRouteSpy.mockImplementationOnce({ query: 'query' }); // ACT const wrapper = getWrapper(); // ASSERT expect(useRouteMock).toHaveBeenCalled(); expect(wrapper.exists()).toBeTruthy(); }); });

全部回复 (1)

P粉2949544472023-08-26 00:01:26 1 楼

首先，我希望在Home.vue中看到router-link或router-view：

因此，Home.spec.ts应该是这样的：

import { expect, it, vi } from 'vitest'; import { mount } from '@vue/test-utils'; import * as VueRouter from 'vue-router'; import Home from '../src/components/Home.vue'; describe('./path/to/Home.vue', () => { const useRouteSpy = vi.spyOn(VueRouter, 'useRoute'); const getWrapper = () => mount(Home as any, { global: { stubs: { 'router-link': { template: '' }, 'router-view': { template: '' }, }, }, }); it('the component should be mounted', () => { // ARRANGE const useRouteMock = useRouteSpy.mockImplementationOnce({ query: 'query' }); // ACT const wrapper = getWrapper(); // ASSERT expect(useRouteMock).toHaveBeenCalled(); expect(wrapper.exists()).toBeTruthy(); }); });

一些评论/建议：

使用描述来界定测试上下文
定义一个全局函数来挂载组件，重用而不是重复
使用.spyOn()和.mockImplementation...()进行监视和模拟
使用某种结构化/直接的方式来编写测试，例如 AAA [安排、行动、断言] 或 GWT [给定、何时、然后]。我已经测试了几年并且仍在使用它，它可以帮助我了解我正在测试的内容
使用.toHaveBeenCalled...()检查模拟是否按预期工作
mount()函数中的存根应与模板中使用的组件相关（因此，如果您不使用，它不应该被列为存根）