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

根據(jù)標(biāo)題，這有可能嗎？

我正在嘗試測(cè)試Vue應(yīng)用程序的一個(gè)簡(jiǎn)單組件，其中包含一個(gè)標(biāo)題和一個(gè)按鈕，該按鈕將用戶重定向到下一個(gè)頁(yè)面。我想測(cè)試一下，當(dāng)按鈕被點(diǎn)擊時(shí)，是否會(huì)向路由器發(fā)送一個(gè)事件/消息，并檢查目標(biāo)路由是否正確。

應(yīng)用程序的結(jié)構(gòu)如下：

App.Vue - 入口組件

<script setup lang="ts">
import { RouterView } from "vue-router";
import Wrapper from "@/components/Wrapper.vue";
import Container from "@/components/Container.vue";
import HomeView from "@/views/HomeView.vue";
</script>

<template>
  <Wrapper>
    <Container>
      <RouterView/>
    </Container>
  </Wrapper>
</template>

<style>

  body{
    @apply bg-slate-50 text-slate-800 dark:bg-slate-800 dark:text-slate-50;
  }

</style>

router/index.ts - Vue Router配置文件

import {createRouter, createWebHistory} from "vue-router";
import HomeView from "@/views/HomeView.vue";

export enum RouteNames {
    HOME = "home",
    GAME = "game",
}

const routes = [
    {
      path: "/",
      name: RouteNames.HOME,
      component: HomeView,
      alias: "/home"
    },
    {
      path: "/game",
      name: RouteNames.GAME,
      component: () => import("@/views/GameView.vue"),
    },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
});

export default router;

HomeView.Vue - App組件中RouterView的入口視圖

<template>
  <Header title="My App"/>
  <ButtonRouterLink :to="RouteNames.GAME" text="Start" class="btn-game"/>
</template>

<script setup>
  import Header from "@/components/Header.vue";
  import ButtonRouterLink from "@/components/ButtonRouterLink.vue";
  import {RouteNames} from "@/router/";
</script>

ButtonRouterLink.vue

<template>
<RouterLink v-bind:to="{name: to}" class="btn">
  {{ text }}
</RouterLink>
</template>

<script setup>
import { RouterLink } from "vue-router";

const props = defineProps({
  to: String,
  text: String
})
</script>

考慮到它使用CompositionAPI和TypeScript，有沒有辦法在Vitest測(cè)試中模擬路由器？

這是一個(gè)測(cè)試文件結(jié)構(gòu)的示例（HomeView.spec.ts）：

import {shallowMount} from "@vue/test-utils";
import { describe, test, vi, expect } from "vitest";
import { RouteNames } from "@/router";
import HomeView from "../../views/HomeView.vue";

describe("Home", () => {
    test ('navigates to game route', async () => {
        // Check if the button navigates to the game route

        const wrapper = shallowMount(HomeView);

        await wrapper.find('.btn-game').trigger('click');

        expect(MOCK_ROUTER.push).toHaveBeenCalledWith({ name: RouteNames.GAME });
    });
});

我嘗試了多種方法：vi.mock('vue-router')，vi.spyOn(useRoute,'push')，vue-router-mock庫(kù)，但是我無法讓測(cè)試運(yùn)行起來，似乎路由器就是不可用的。

更新（15/04/23）

根據(jù) @tao 的建議，我意識(shí)到在HomeView中測(cè)試點(diǎn)擊事件并不是一個(gè)很好的測(cè)試（測(cè)試的是庫(kù)而不是我的應(yīng)用程序），所以我添加了一個(gè)測(cè)試 ButtonRouterLink，看看它是否正確渲染了Vue RouterLink，使用to參數(shù)：

import {mount, shallowMount} from "@vue/test-utils";
import { describe, test, vi, expect } from "vitest";
import { RouteNames } from "@/router";
import ButtonRouterLink from "../ButtonRouterLink.vue";

vi.mock('vue-router');

describe("ButtonRouterLink", () => {
    test (`correctly transforms 'to' param into a router-link prop`, async () => {
       
        const wrapper = mount(ButtonRouterLink, {
            props: {
                to: RouteNames.GAME
            }
        });

        expect(wrapper.html()).toMatchSnapshot();
    });
});

它渲染了一個(gè)空的HTML字符串""

exports[`ButtonRouterLink > correctly transforms 'to' param into a router-link prop 1`] = `""`;

伴隨著一個(gè)不太有用的Vue警告（未指定預(yù)期類型）：

[Vue warn]: Invalid prop: type check failed for prop "to". Expected , got Object  
  at <RouterLink to= { name: 'game' } class="btn btn-blue" > 
  at <ButtonRouterLink to="game" ref="VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Invalid prop: type check failed for prop "ariaCurrentValue". Expected , got String with value "page". 
  at <RouterLink to= { name: 'game' } class="btn btn-blue" > 
  at <ButtonRouterLink to="game" ref="VTU_COMPONENT" > 
  at <VTUROOT>
[Vue warn]: Component is missing template or render function. 
  at <RouterLink to= { name: 'game' } class="btn btn-blue" > 
  at <ButtonRouterLink to="game" ref="VTU_COMPONENT" > 
  at <VTUROOT>