编辑

我做了一个stackblitz的例子，在这里我有最基本的问题。

编辑结束

我做了一个简单的虚拟应用程序，因为最终它将适合一个更大的企业应用程序，但我首先做了一个概念证明，以确保它的工作.
我已经按照https://mswjs.io/的文档在测试运行器中获取mock。所以我有一个src/mocks/server.ts文件，我用处理程序设置服务器。我有一个src/setup-file.ts用于Vitest，它在vitest.config.ts setupFiles属性中声明来执行beforeAll，MSW文档中提到的afterEach和afterAll。我在运行应用程序时在控制台中看到，请求被模拟，因为它确实拦截了它。然而，它在测试运行器中什么也没做。
我有一个简单的composable，它从一个公共graphql端点获取国家（只是为了测试：-））。

// /src/composables/useFetchCountries.ts
const GET_COUNTRIES = gql`
  query GetCountries {
    countries {
      code
      name
      currency
    }
  }
`;

const useFetchCountries = () => {
  const { result } = useQuery<GetCountriesQuery>(GET_COUNTRIES);

  const countries = computed(() => result.value?.countries);

  return {
    countries,
  };
};

字符串
然后在App. vue中检索。

<template>
  <h1>Some countries</h1>
  <ul>
    <li v-for="country in countries" :key="country.code">
      {{ country.name }} | {{ country.code }}
    </li>
  </ul>
</template>

<script setup lang="ts">
  import useFetchCountries from "./composables/useFetchCountries";
  const { countries } = useFetchCountries();
</script>

型
我的测试是这样的：

// /src/composables/useFetchCountries.spec.ts
import { provideApolloClient } from "@vue/apollo-composable";
import { createMockClient } from "mock-apollo-client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import useFetchCountries from "./useFetchCountries";

let mockApolloClient = createMockClient();

describe.only("composable - useFetchCountries", () => {
  beforeEach(() => {
    mockApolloClient = createMockClient();
    provideApolloClient(mockApolloClient);
  });
  afterEach(() => {
    vi.restoreAllMocks();
  });

  it("retrieves all a couple countries", async () => {
    const { countries } = useFetchCountries();

    const dummy = [
      { code: "AD", name: "Andorra", currency: "EUR" },
      { code: "AT", name: "Austria", currency: "EUR" },
      { code: "AX", name: "Åland", currency: "EUR" },
      { code: "BE", name: "Belgium", currency: "EUR" },
      { code: "BL", name: "Saint Barthélemy", currency: "EUR" },
    ];

    expect(countries.value).toBe(dummy);
  });
});

型
好了，现在我终于在处理程序中拦截了GetCountries查询并返回了一个mock。

// /src/mocks/handlers.ts
import { HttpResponse, graphql } from "msw";

const coupleCountries = new Map([
  ["AD", { code: "AD", name: "Andorra", currency: "EUR" }],
  ["AT", { code: "AT", name: "Austria", currency: "EUR" }],
  ["AX", { code: "AX", name: "Åland", currency: "EUR" }],
  ["BE", { code: "BE", name: "Belgium", currency: "EUR" }],
  ["BL", { code: "BL", name: "Saint Barthélemy", currency: "EUR" }],
]);

export const handlers = [
  graphql.query("GetCountries", ({ query }) => {
    console.log('Intercepted "GetCountries" query: ', query);
    return HttpResponse.json({
      data: {
        countries: Array.from(coupleCountries.values()),
      },
    });
  }),
];

型
然而，由于Vue的计算，国家在运行测试时已经是未定义的了！我不知道如何解决这个问题，因为我刚刚开始使用Vue。我明白了它的主要要点，但是在编写更高级的测试时，我完全处于黑暗之中。
在更大的应用程序中，composable中有一些方法可以处理从useQuery中检索的数据。我想测试这些方法，以确保它们是正确的，并且不会在以后引起副作用。有什么想法可以修复上面的测试，以确保模拟的数据实际上在测试中？