国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

<p>我試圖理解用 Vitest 模擬 Vue-Router 的邏輯。</p> <p>為此，我嘗試在一個非常簡單的項(xiàng)目上設(shè)置并模擬我的測試環(huán)境。當(dāng)我嘗試按照Vue-Test-Utils的官方文檔進(jìn)行操作時，總是出現(xiàn)錯誤。我不知道是不是因?yàn)樗麄兪褂?Jest。</p> <p>使用真正的 vue-router 解決了我的問題，但我認(rèn)為模擬 vue-router 更好。</p> <p>下面我先傳達(dá)一下項(xiàng)目的源碼，然后是我收到的錯誤。</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>

<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>

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();
  });
});