Next.jsとReact Nativeでテスト実装体験をできるだけ揃えるためのAPIモックラッパーの実装案

const server = setupMockServer();

describe('HogeComponent', () => {
  test('Hogeリストが表示される', async () => {
    server.use(
      createHandler(apiClient.hoge.fuga, 'get', { response: hogeMock }),
    );

jest.mock('@aspida/swr', () => ({
  __esModule: true,
  default: jest.fn(),
}));
// ...
      jest
        .mocked(useAspidaSWR)
        .mockReturnValueOnce({ data: hogeMock, error: null })

import type { SetupServer } from 'msw/node';

export const mockAspidaAPI = <Api extends AspidaMethods<M> & { $path: () => string }, M extends MethodNames>(
  server: SetupServer,
  ...params: Parameters<typeof createHandler<Api, M>>
) => {
  server.use(createHandler(...params));
};

const createHandler = </** ジェネリクス型は割愛 */>(
  api: Api,
  method: M,
  options?: /** 型は割愛 */,
) => {
  // 割愛

  return rest[method](api.$path(), (req, res, ctx) => {
    return res(ctx.status(200), ctx.json(options?.response));
  });
};

const server = setupMockServer();

describe('HogeComponent', () => {
  describe('fooがNULLの場合', () => {
    test('Childrenを表示する', async () => {
      mockAspidaAPI(server, apiClient.hoge.status, 'get', {
        response: {
          foo: null,
          bar: 'string',
          baz: true,
        },
      });

      const component = render(
        <HogeComponent>
          <Text>hogehoge</Text>
        </HogeComponent>,
      );

export const setupMockServer: () => { use: (p: unknown) => void } = () => {
  return {
    use: () => void 0,
  };
};

const server = setupMockServer();

// 中略

    test('Childrenを表示する', async () => {
      mockAspidaAPI(server, apiClient.hoge.status, 'get', {
        response: {
          foo: null,
          bar: 'string',
          baz: true,
        },
      });

      const component = render(
        <HogeComponent>
          <Text>hogehoge</Text>
        </HogeComponent>,
      );

export const mockAspidaAPI = <Api extends AspidaMethods<M> & { $path: () => string }, M extends MethodNames>(
  server: { use: (p: unknown) => void },
  ...params: Parameters<typeof createHandler<Api, M>>
) => {
  server.use(createHandler(...params));
};

const createHandler = // 型引数は上記同様なので割愛
) => {
  jest.mocked(useAspidaSWR).mockImplementation((...params) => {
    if (params[0].$path() !== api.$path()) {
      throw new Error('Invalid path');
    }
    // 割愛

    return {
      data: options.response,
      isValidating: false,
      error: options?.error ?? null,
      mutate: jest.fn(),
    };
  });
};