你如何嘲笑具有道具的Jest的反應組件？

必須有一個簡單的方法來做到這一點，但我無法在任何地方找到文檔化的語法。我有一個陣營與成分，我想開玩笑嘲笑這樣的道具：你如何嘲笑具有道具的Jest的反應組件？

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

這一工程，但我最終有一個警告做出反應塞滿我的測試結果：

警告：標記上的未知道具options。從元素中刪除此道具。

我嘲笑的組件確實有一個選項道具，我真的不在乎它是如何渲染的，所以我怎麼可以用它不會拋出警告的方式來模擬它呢？我已經嘗試在模擬中使用React.createElement，並返回一個元素名稱和道具參數的數組到最後。

我想嘲笑組件用於這樣的：

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

來源

2017-09-05 EMC

讓我看看你的組件正在測試嗎？ –

你是一個字符串作爲第二個參數嘲諷的成分。這是不尋常的，因爲jest.mock函數期望函數作爲第二個參數。該字符串可能適用於您的測試（取決於它如何呈現），但它在Jest's documentation中的未定義行爲，可能是導致您的問題的原因。而是傳遞一個返回組件的函數。下面是一個通過，只是通過名稱後面一個簡單的功能組件：

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

來源

2017-09-06 02:26:13

如果您只需要在快照中合理呈現的東西，那麼支持使用字符串進行模擬，但是您說得對，對於這種情況可能過於簡單。你知道如何在你上面發佈的例子中添加道具嗎？這就是我真正想要的。 – EMC

這個語法是正確的，但是我在下面的答案中有些細節我做錯了。 – EMC

玩了之後，我意識到我有語法錯誤的，我返回的組件。嘲諷它是這樣工作的：

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

嘲諷像這樣沒有（這是我在做什麼）：

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

警告甚至告訴我這個問題，但我卻誤以爲是：

警告：React.createElement：類型無效 - 預期的字符串（對於內置組件）或類/功能（用於複合組件），但得到：對象。檢查渲染方法Termination。

來源

2017-09-06 16:35:58 EMC

你如何嘲笑具有道具的Jest的反應組件？

回答

相關問題