どのように反応成分をJestと模倣して小道具を持っていますか？

Question

これを行う簡単な方法があるはずですが、文書化された構文はどこにも見つかりません。

：私は私のテスト結果を乱雑リアクト警告で終わることを除いて、作品

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

：私は、私はこのような冗談でモックしたい小道具と反応する成分を有し警告：未知の小道具options。この小道具を要素から取り外します。

私は選択肢が下支えしていないからかってるの成分、と私は本当にそれがレンダリングされますどのように気にしないので、どのように私はそれが警告をスローしないような方法でそれを模擬することができますか？私は、モックでReact.createElementを使用し、要素名と小道具引数を持つ配列を返すことを試みました。

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

<MultiSelect 
options={['option 1', 'option 2']} 
/> 

Answer 1

あなたは第二引数として文字列を持つコンポーネントをからかっています。 jest.mock関数は関数を第2引数として期待しているので、これは珍しいことです。文字列はテストのために（レンダリング方法によって）動作するかもしれませんが、定義されていない動作がJest's documentationであり、おそらくあなたの問題を引き起こしています。代わりに、コンポーネントを返す関数を渡します。ここに戻ったばかりの名前を渡し、単純な機能成分を通過させる1です：

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

Answer 2

それで遊んでた後、私は私が私の返されたコンポーネントの間違った構文を気づきました。

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

これがないようにそれをあざける（これは私がやっていたものです）：

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

警告も私の問題を語ったが、私はそれを誤解：

この作品のようにそれをからかっ

警告：React.createElement：タイプが無効である - 予想ストリング またはクラス/（複合 コンポーネントの）機能が、得た（内蔵部品用）：オブジェクト。レンダリング方法がTerminationであることを確認します。