web-dev-qa-db-ja.com

Jest：同じモジュールがexportという名前の場合、デフォルトのエクスポートコンポーネントをモックする方法は？

React Componentクラスをデフォルトでエクスポートする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 &&ヤーンテストでテストを実行できます。

ありがとう！

javascriptreactjsunit-testingjestjses6-modules
16
bean

問題は、ShallowWrapperクラスのgetElementメソッドに、renderメソッドを含むクラスを渡す必要があることだと思います。そのためには、MyComponent.mockImplementationがクラスコンストラクターをより完全にモックする必要があります。

クラスコンストラクターをモックする方法の詳細については、「mockImplementationを使用してクラスコンストラクターをモックすることもできます」から始まるJestのドキュメントを参照してください。 https://facebook.github.io/jest/docs/en/mock- function-api.html＃mockfnmockimplementationfn

Jestドキュメントをモデルとして使用して、MyComponentクラスコンストラクターおよびをモック化して、次のように酵素によって浅くレンダリング可能にすることができます。

MyComponent.mockImplementation(() => {
  return {
    render: () => <div>MockComponent</div>
  };
});

GetElementがrenderメソッドを探しに行くと、それが見つかります。

リポジトリからApp.mockImplementation.test.jsファイルにこの変更を実装する要点を次に示します。 https://Gist.github.com/timothyjellison/a9c9c2fdfb0b30aab5698dd92e901b24

3
Tim Ellison

他の解決策は私にとってはうまくいきませんでした。これは私がやった方法です：

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

それを行う別の方法：

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

const myModule = require('../src/dependency');
myModule.utilityFunction = 'your mock'
7
Albert Olivé