☰

Jest: 同じモジュールに名前付きエクスポートがある場合に、デフォルトのエクスポート コンポーネントをモックするにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript reactjs unit-testing jestjs es6-modules
Jest: 同じモジュールに名前付きエクスポートがある場合に、デフォルトのエクスポート コンポーネントをモックするにはどうすればよいでしょうか? 質問する

デフォルトで React コンポーネント クラスをエクスポートする ES6 モジュールがありますが、プレーンな JS 関数も名前付きエクスポートとしてエクスポートします。このモジュールを使用する他のパッケージをテストするときは、デフォルトでエクスポートされたコンポーネントと名前付きエクスポートされた関数の両方をモックして、ユニット テストを純粋に保ちます。

モジュールは次のようになります。

import React, { Component } from 'react';

export default class MyComponent extends Component {
  render() {
    return <div>Hello</div>
  }
}

export function myUtilityFunction() { return 'foo' };

エクスポートをモックするには、次の構文を使用します。

import React from 'react';
import MyComponent, { myUtilityFunction } from './module';

jest.mock('./module');
MyComponent.mockImplementation(() => 'MockComponent');
myUtilityFunction.mockImplementation(() => 'foo');

ただし、この構文を使用しようとすると、MyComponent は他のコンポーネント内で使用されるときにモック化されないようです。このように MyComponent をモック化して単独でレンダリングしようとすると、null にレンダリングされます。

この動作は非常に奇妙です。まったく同じ構文を使用していても、両方のインポートが JavaScript 関数である場合、モックは期待どおりに機能するからです。インポートが両方とも関数である場合に構文が機能することを確認する、ここで開いた StackOverflow の問題を参照してください。

以下に、問題をデモした GitHub リポジトリと、私が試したいくつかの解決策を示します。https://github.com/zpalexander/jest-enzyme-problem

リポジトリをビルドし、yarn install && yarn testでテストを実行できます。

ありがとう！

ベストアンサー1

他の解決策は私にはうまくいきませんでした。私は次のようにしました:

  jest.mock('./module', () => ({
    __esModule: true,
    myUtilityFunction: 'myUtilityFunction',
    default: 'MyComponent'
  }));

別の方法:

jest.unmock('../src/dependency');

const myModule = require('../src/dependency');
myModule.utilityFunction = 'your mock'

おすすめ記事