Question

必须有一种简单的方法来做到这一点，但我无法在任何地方找到文档化的语法。我有一个带有支柱的React组件，我喜欢在Jest中嘲笑这样：

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

这样可行，但最终我的React警告会使我的测试结果混乱：

警告：标记上的未知道具options。从元素中删除此道具。

我嘲笑的组件确实有一个选项道具，我真的不关心它是如何渲染的，所以我怎么能以这样的方式嘲笑它不会抛出警告？我尝试在模拟中使用React.createElement，并返回一个带有元素名称和props参数的数组。

我想要模拟的组件使用如下：

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

Answer 1

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

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：type无效 - 需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。检查Termination的呈现方法。

Answer 3

在希望查看Jest快照中提供的组件名称和道具的情况下，我发现以下模拟模式很有用：

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

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

3 个答案: