web-dev-qa-db-ja.com

小道具を持つJestで反応コンポーネントをどのようにモックしますか？

これを行う簡単な方法がありますが、文書化された構文はどこにも見つかりません。私はReactコンポーネントを持っています

jest.mock('./common/MultiSelect', 'MultiSelect');

ただし、テスト結果が乱れるReact警告が表示されます。

警告：タグの不明なprop options。要素からこの小道具を削除します。

私がモックしているコンポーネントにはオプションの小道具があり、実際にどのようにレンダリングされるか気にしないので、警告をスローしないようにどのようにモックできますか？モックでReact.createElementを使用して、要素名とprops引数を持つ配列を最後まで返してみました。

モックしたいコンポーネントは次のように使用されます。

<MultiSelect
options={['option 1', 'option 2']}
/>
reactjsunit-testingjestjsenzyme
10
EMC

2番目の引数として文字列を使用してコンポーネントをモックしています。 _jest.mock_関数は関数を2番目の引数として予期するため、これは異常です。文字列はテストで機能する可能性があります（レンダリング方法によって異なります）が、 Jestのドキュメント では未定義の動作であり、おそらく問題の原因です。代わりに、コンポーネントを返す関数を渡します。名前を返すだけの単純な機能コンポーネントを渡すものを次に示します。

jest.mock('./common/MultiSelect', () => () =><span>MultiSelect</span>);

7
Ben McCormick

それをいじった後、返されたコンポーネントの構文が間違っていることに気付きました。このようにモックする：

jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => () => <div />);

このようにock笑することはしません（これは私がやっていたことです）：

jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => <div />);

警告は私に問題を告げさえしましたが、私はそれを誤解しました：

警告：React.createElement：typeは無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：を取得しました。 Terminationのrenderメソッドを確認してください。

2
EMC