msw で delay 使用時、Vitest においてテスト時の delay は 0 にする

msw を使うとき、ローカルで開発するためレスポンスに delay を使用することがあります。

• サンプルのコード

// src/mocks/utils/handlers.ts
export const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [
  rest.get(client.v1.users.$path(), (_, res, ctx) => {
    return res(ctx.delay(), ctx.json(usersResponseDummy));
  }),
  rest.get(client.v1.date.$path(), (_, res, ctx) => {
    return res(ctx.delay(2000), ctx.json(dateResponseDummy));
  }),
];

このときに作成した RequestHandler、上記のサンプルでは GraphQL ではなく REST なので RestHandler ですが、こうしたハンドラを Storybook やテストで共有して使用する場合、delay があったとしてもおそらく Storybook ではとくに問題になりません。

ですがテストでは delay の分余計に時間がかかってしまうので、テスト時にはこのディレイを無効化したくなります。

Response transformer を使った方法

いくつか方法はありますが、ここでは Response transformer を使ってテスト時の delay を 0 にしてみます。

import { compose, context, ResponseTransformer, RestContext } from "msw";

export const delay = (
  duration?: Parameters<RestContext["delay"]>[0]
): ResponseTransformer => {
  if (import.meta.env.MODE === "test") {
    return compose(context.delay(0));
  }

  return compose(context.delay(duration));
};

今回は Vitest を使用しているので import.meta.env.MODE が test のとき、delay を 0 にしています。

これを使用する場合には次のように記述します。

import { delay } from "@/mocks/utils/delay";

export const handlers: RestHandler<MockedRequest<DefaultBodyType>>[] = [
  rest.get(client.v1.users.$path(), (_, res, ctx) => {
    return res(delay(), json(usersResponseDummy));
  }),
  rest.get(client.v1.date.$path(), (_, res, ctx) => {
    return res(delay(2000), ctx.json(dateResponseDummy));
  }),
];

作成した delay のテストを書く

msw の delay をモックして、実行時の引数が正しく渡せているかをテストします。

Vitest の Mock は 公式ドキュメントの Cheat Sheetがわかりやすいです。module をモックしたいので Modules の項目を参考に、delay をモックします。

vi.mock("msw", async () => {
  const actual = await vi.importActual<typeof import("msw")>("msw");
  return {
    ...actual,
    context: {
      ...actual.context,
      delay: vi.fn(),
    },
  };
});

ここでは delay のみをモックすればいいので、importActual を使っています。jest だと requireActual なので、私はそれに気づかずちょっとハマってました。

次にテストごとに環境変数を変更する方法ですが、こちらも先程の公式ドキュメントの Cheat Sheetに記載されています。

const originalViteEnvMode = import.meta.env.MODE;

beforeEach(() => {
  import.meta.env.MODE = originalViteEnvMode;
});

開発時とテスト時にそれぞれ delay の引数が正しく渡せているかを確認するテストをしてみます。

describe("delay", () => {
  it("開発時に delay が指定された時間になること", () => {
    import.meta.env.MODE = "development";
    const delayMock = (context as Mocked<typeof context>).delay;

    delay(100);

    expect(delayMock.mock.calls.length).toBe(1);
    expect(delayMock.mock.calls[0][0]).toBe(100);
  });

  it("テスト時に delay が 0 になること", () => {
    const delayMock = (context as Mocked<typeof context>).delay;

    delay(100);

    expect(delayMock.mock.calls.length).toBe(1);
    expect(delayMock.mock.calls[0][0]).toBe(0);
  });
});

その他の方法

参考にした discussions のリンク を見ていただけるとわかるのですが、別の方法としてはシンプルに ctx.delay() 内に数値を指定するとき、引数に関数でラップした数値を ctx.delay(ms(100)) として ms() がテストのときに 0 を戻すようにしてあげる方法があります。

参考

• Add option to disable delay globally, to ensure consistency in performance of tests in jest #935