jestでモック

概要

いちいち書くほどでもないが、2ヶ月前に初めてjestで単体テスト書いた時は「どうやってモックにしてスタブ作るのやぁああ」ってなってたし、一応メモしとこう

検証コード

テスト対象のコード

import * as [module] from "xxx"形式とimport [module] from "xxx"形式でインストールしているモジュールをモック&スタブにしてみる。

import React from "react";
import ExportDefault from "./export_default";
import * as ExportMulti from "./export_multi";

const App = () => {
  const stringMulti = ExportMulti.returnString;
  const functionMulti = ExportMulti.returnFunction;
  const stringDefault = ExportDefault;
  return (
    <>
      <div id="stringMulti">stringMulti: {stringMulti}</div>
      <div id="functionMulti">functionMulti: {functionMulti()}</div>
      <div id="stringDefault">stringDefault: {stringDefault}</div>
    </>
  );
};

export default App;

const returnString = "string from default";
export default returnString;

export const returnString = "string from multi";

export const returnFunction = () => "function from multi";

テストコード

jest.mockでimport [module] from "xxx"、jest.spyOnでimport * as [module] from "xxx"形式をモック、スタブにできそう

import { mount } from "enzyme";
import React from "react";
import App from "../../../src/components/jest_mock/App";
import * as ExportMulti from "../../../src/components/jest_mock/export_multi";
jest.mock("../../../src/components/jest_mock/export_default", () => {
  return "mock default string";
});

describe("App.tsx", () => {
  beforeEach(() => {
    jest.resetModules();
  });

  it("all import mock", () => {
    /** 準備 */
    const returnFunctionMock = jest.spyOn(ExportMulti, "returnFunction");
    returnFunctionMock.mockReturnValueOnce("mock multi function");
    /** 実行 */
    const wrapper = mount(<App />);
    /** 検証 */
    expect(returnFunctionMock).toBeCalledTimes(1);
    expect(wrapper).toMatchSnapshot();
  });
});

ぶつかった点

jest.mockはdescribe, beforeEach, it内で宣言しても有効にならない。。。のでスタブ指定した文字列をテストの都度指定できない。。
今の所そんなケースないのでとりあえずこれでいこう