1. ホーム
  2. reactjs

[解決済み] テストごとにJestのモック関数の戻り値を変更するには?

2022-11-04 01:39:56

質問

私のコンポーネントテストファイルには、次のようなモックモジュールがあります。

  jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => true,
    guidanceEnabled: () => true
  }));

これらの関数は、ある特定の機能を隠したり表示したりするために、コンポーネントのレンダー関数で呼び出されます。

これらのモック関数の戻り値の異なる組み合わせでスナップショットを取りたいと思います。

次のようなテストケースがあるとします。

 it('RowListItem should not render navigation and guidance options', () => {
    const wrapper = shallow(
      <RowListItem type="regularList" {...props} />
    );
    expect(enzymeToJson(wrapper)).toMatchSnapshot();
  });

このテストケースを実行するために、モックモジュールの関数の戻り値を false のように動的に変更したい。

jest.mock('../../../magic/index', () => ({
    navigationEnabled: () => false,
    guidanceEnabled: () => false
  }));

をインポートしているので RowListItem コンポーネントをインポートしているので、モックモジュールが再びインポートすることはないでしょう。

どのように解決するのですか?

スパイを返すようにモジュールをモックして、テストにインポートすればよいでしょう。

import {navigationEnabled, guidanceEnabled} from '../../../magic/index'

jest.mock('../../../magic/index', () => ({
    navigationEnabled: jest.fn(),
    guidanceEnabled: jest.fn()
}));

そして、後で実際の実装を変更する際には mockImplementation

navigationEnabled.mockImplementation(()=> true)
//or
navigationEnabled.mockReturnValueOnce(true);

そして次のテストでは

navigationEnabled.mockImplementation(()=> false)
//or
navigationEnabled.mockReturnValueOnce(false);