您如何使用具有道具的 Jest 模拟反应组件？答案

【问题标题】：How do you mock a react component with Jest that has props?您如何使用具有道具的 Jest 模拟反应组件？
【发布时间】：2018-02-13 05:06:10
【问题描述】：

必须有一种简单的方法来做到这一点，但我在任何地方都找不到文档化的语法。我有一个带有道具的 React 组件，我想像这样在 Jest 中模拟：

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

这行得通，只是我最终得到一个 React 警告，使我的测试结果变得混乱：

警告：标签上的未知道具 options。从元素中移除这个道具。

我正在模拟的组件确实有一个选项道具，我真的不在乎它是如何呈现的，那么我怎样才能以不会抛出警告的方式模拟它呢？我尝试在 mock 中使用 React.createElement，并返回一个包含元素名称和 props 参数的数组。

我要模拟的组件是这样使用的：

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

【问题讨论】：

向我展示你正在测试的组件？

标签： reactjs unit-testing jestjs enzyme

【解决方案1】：

您使用字符串作为第二个参数来模拟组件。这很不寻常，因为jest.mock 函数需要一个函数作为第二个参数。该字符串可能适用于您的测试（取决于它的呈现方式），但它在Jest's documentation 中是未定义的行为，可能是导致您的问题的原因。而是传递一个返回组件的函数。这是一个传递一个简单的函数组件的函数，它只传递名称：

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

【讨论】：

如果您只需要在快照中合理呈现的内容，则支持使用字符串进行模拟，但您是对的，对于这种情况可能过于简单。您知道如何在上面发布的示例中添加道具吗？这就是我真正想要的。
这个语法是正确的，但在下面的回答中我做错了一些细节。
我不得不将 jest.mock()... 放在我的测试文件的顶部，以及导入。花了一点时间尝试将它放入我的笑话中描述（），但直到我将它与导入一起移动（或至少在所有描述之外）才起作用。
当你模拟一个 React 组件时，你会断言什么？

【解决方案2】：

如果您想查看 Jest 快照中提供的组件名称和道具，我发现以下模拟模式很有用：

jest.mock('./common/MultiSelect', () => (props) => <mock-MultiSelect {...props} />);

【讨论】：

【解决方案3】：

在玩弄它之后，我意识到我返回的组件的语法错误。像这样模拟它是有效的：

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

像这样嘲笑它不会（这就是我正在做的）：

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

警告甚至告诉了我问题，但我误解了它：

警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。检查Termination的渲染方法。

【讨论】：