搜索

首页  >  问答  >  正文

使用 Vue-Test-Utils 和 Vitest 进行 Vue-Router 模拟

<p>我试图理解用 Vitest 模拟 Vue-Router 的逻辑。</p> <p>为此,我尝试在一个非常简单的项目上设置并模拟我的测试环境。当我尝试按照Vue-Test-Utils的官方文档进行操作时,总是出现错误。我不知道是不是因为他们使用 Jest。</p> <p>使用真正的 vue-router 解决了我的问题,但我认为模拟 vue-router 更好。</p> <p>下面我先传达一下项目的源码,然后是我收到的错误。</p> <h3>首页.vue</h3> <pre class="brush:php;toolbar:false;"><script setup lang="ts"> import {onMounted} from "vue"; import {useRoute} from "vue-router"; const route = useRoute() onMounted(() => { console.log(route.query) }) </script> <template> <div>Home</div> </template></pre> <h3>首页.spec.ts</h3> <pre class="brush:php;toolbar:false;">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() })</pre> <h3>vite.config.ts</h3> <pre class="brush:php;toolbar:false;">/// <reference types="vitest" /> 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 } })</pre> <h3>我的错误消息如下:..</h3> <h3>我尝试过的方法</h3> <p>我尝试像下面这样模拟 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;">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() })</pre></p>
P粉190883225P粉190883225487 天前643

全部回复(1)我来回复

  • P粉294954447

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

    首先,我希望在 Home.vue 中看到 router-linkrouter-view

    <script setup lang="ts">
    import { onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    
    const route = useRoute();
    
    onMounted(() => {
      console.log(route.query);
    });
    </script>
    
    <template>
      <router-link to="home">Go to home</router-link>
      <router-view />
    </template>
    

    因此,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: '<div/>' },
            'router-view': { template: '<div/>' },
          },
        },
      });
    
      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() 函数中的存根应与模板中使用的组件相关(因此,如果您不使用 ,它不应该被列为存根)

    希望有帮助, 干杯!

    回复
    0
  • 取消回复