web-dev-qa-db-ja.com

Jestを使用してReactコンポーネントを小道具でモックする

React Reduxストアなどへのアクセスに依存する他のコンポーネントを含むコンポーネントがあります。これにより、完全な酵素マウントを実行するときに問題が発生します。

_import ComponentToMock from './ComponentToMock';

<ComponentToTest>
  ...some stuff
  <ComponentToMock testProp="This throws a warning" />
</ComponentToTest>
_

Jestの.mock()メソッドを使用してサブコンポーネントをモックアウトしたいので、テストの心配はありません。

私は次のようなものでストレートコンポーネントをモックアウトできることを知っています：

jest.mock('./ComponentToMock', () => 'ComponentToMock');

ただし、このコンポーネントは通常小道具を受け取るため、Reactは動揺し、未知の小道具（この場合はtestProp）が_<ComponentToMock />_に渡されるという警告を発します。

代わりに関数を返そうとしましたが、JestモックでJSXを返すことはできません。この場合、エラーがスローされます。

だから私の質問はどうすれば

a）ComponentToMockを取得して、渡された小道具を無視する、または

b）Reactコンポーネントを返します。これは、テストについて心配していない子コンポーネントのモックに使用できます。

または...より良い方法はありますか？

reactjsunit-testingmockingjestjsenzyme
17
Mike Hopkins

jest.mock()のドキュメント の下部に、巻き上げ動作を防ぐための注意事項があります。

注：babel-jestを使用する場合、mockへの呼び出しは自動的にコードブロックの先頭に引き上げられます。この動作を明示的に回避する場合は、doMockを使用します。

その後、説明どおりに実行できます。テストする必要のないコンポーネントのスタブである関数を返します。

jest.doMock('./ComponentToMock', () => {
  const ComponentToMock = () => <div />;
  return ComponentToMock;
});

const ComponentToTest = require('./ComponentToTest').default;

スナップショットでレンダリングされるため、スタブコンポーネントに名前を付けると役立ちます。

17
Mike Reifman

この質問をしてから、もう少し学びました。ここでは、propsを渡す必要があるモックコンポーネントを処理する別の（より良い？）方法を使用します。モジュールモックファイルを使用します。

まず、コンポーネントと同じ名前のファイルを作成して、コンポーネントのフォルダーの下の___mocks___フォルダーにモックします。

_.
|- /ComponentToMock.js
└- /__mocks__/ComponentToMock.js <-- create this folder/file!
_

注：このドキュメントの執筆時点では、フォルダはmust ___mocks___と呼ばれているようです（各フォルダに___mocks___を作成する必要がありますコンポーネントをモックする必要があります。アンダースコアが動揺する場合は、それらが存在しないふりをしてください;））

次に、このモックファイルで、必要に応じてファイルを記述できます。

_// This code would live in ./__mocks__/ComponentToMock.js
import React from 'react';
const ComponentToMock = ({ testProp }) => <div>A mock with '{testProp}' passed!</div>;
export default ComponentToMock;
_

次に、テストファイルで、Jestモックステートメントをjest.mock('./ComponentToMock');に変更します。

Jestは、2番目の関数パラメーターなしで.mock()を検出すると、自動的に___mocks___フォルダーを探します。ただし、テスト対象のコンポーネントでモックステートメントが引き上げられても、モック自体のインポートには影響しません。したがって、Reactコンポーネント！

これは、小道具を渡す必要のあるモックされたコンポーネントでうまく機能するようです。そうでなければ、null化された関数が返された場合、小道具の警告を生成します（ただし、コンポーネントが小道具を受け取らない場合、使用を続けることは完全に受け入れられます）。これが一部の人々に役立つことを願っています。

4
Mike Hopkins