フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

<script setup lang="ts">
import useFetch from '@/composables/useFetch'
 
const { isLoading, data: users } = useFetch('/api/users')
 
</script>
 
<template>
  <div v-if="isLoading">Loading...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">...</li>
  </ul>
</template>

import axios from 'axios'
 
const useFetch = async (url: string) => {
  const { data } = await axios.get(url)
  // ...
}
 
export default useFetch

npm init vue
Need to install the following packages:
  create-vue
Ok to proceed? (y) 

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Cypress for testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

npm install @vueuse/core
npm --save-dev install jest @types/jest ts-jest vue-jest@next @testing-library/vue@next msw whatwg-fetch @testing-library/jest-dom

module.exports = {
  moduleFileExtensions: ["js", "ts", "json", "vue"],
  transform: {
    "^.+\\.ts$": "ts-jest",
    "^.+\\.vue$": "vue-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};
 

{
  "compilerOptions": {
    ...
    "types": ["@types/jest"],
    ...
  },
  ...
}

{
  ...
  "scripts": {
    ...
    "test": "jest"
  },
  ...
}

mkdir src/mocks

import { ResponseResolver, MockedRequest, restContext } from "msw";
 
const get: ResponseResolver<MockedRequest, typeof restContext> = (
  req,
  res,
  ctx
) => {
  return res(
    ctx.status(200),
    ctx.json([
      {
        id: 1,
        name: "John",
      },
      {
        id: 2,
        name: "Alice",
      },
      {
        id: 3,
        name: "Bob",
      },
    ])
  );
};
 
export default { get };

import { rest } from "msw";
import users from "@/mocks/api/users";
 
const const handlers = [rest.get("/api/users", users.get)];

import { setupWorker } from "msw";
import { handlers } from "./handlers";
 
export const worker = setupWorker(...handlers);

import { setupServer } from "msw/node";
import { handlers } from "./handlers";
 
export const server = setupServer(...handlers);

<script setup lang="ts">
import { useFetch } from "@vueuse/core";
import { watch } from "vue";
 
interface User {
  id: number;
  name: string;
}
 
const {
  isFetching,
  error,
  data: users,
} = useFetch<User[]>("/api/users").json();
</script>
 
<template>
  <div v-if="isFetching">Loading...</div>
  <div v-else-if="error">Something went wrong...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id" data-testid="user">
      {{ user.name }}
    </li>
  </ul>
</template>
 

import UserList from "../UserList.vue";
import { server } from "@/mocks/server";
import "whatwg-fetch";
 
describe("UserList.vue", () => {
    // Establish API mocking before all tests.
    beforeAll(() => server.listen());
    // Reset any request handlers that we may add during the tests,
    // so they don't affect other tests.
    afterEach(() => server.resetHandlers());
    // Clean up after the tests are finished.
    afterAll(() => server.close());
 
    test("...");
});
 

import { render } from "@testing-library/vue";
import "@testing-library/jest-dom";
 
describe("UserList.vue", () => {
  // ...
    test("API コールが完了するまではローディングが表示されユーザー一覧が表示されない", async () => {
      const { findByText, queryAllByTestId } = render(UserList);
 
      expect(await findByText("Loading...")).toBeInTheDocument();
      expect(queryAllByTestId("user")).toHaveLength(0);
    });
  });
});

    test("API コールが完了したらローディングの表示はなくなりユーザー名の一覧が表示される", async () => {
      const { findByText, queryByText, findAllByTestId } = render(UserList);
 
      expect(await findAllByTestId("user")).toHaveLength(3);
      expect(await findByText("John")).toBeInTheDocument();
      expect(queryByText("Loading...")).not.toBeInTheDocument();
    });

import { msw } from "msw"
 
// ...
 
  test("API コールが失敗したらエラーメッセージが表示される", async () => {
    server.use(
      rest.get("/api/users", (req, res, ctx) => {
        return res.once(
          ctx.status(500),
          ctx.json({ message: "Internal Server Error" })
        );
      })
    );
 
    const { findByText, queryByText } = render(UserList);
 
    expect(await findByText("Something went wrong...")).toBeInTheDocument();
    expect(queryByText("Loading...")).not.toBeInTheDocument();
  });