reactjs - 如何使用带有 props 的 Jest 来模拟 React 组件？

Question

必须有一个简单的方法来做到这一点，但我在任何地方都找不到记录的语法。我有一个带有 prop 的 React 组件，我想在 Jest 中模拟它，如下所示:

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

这可行，只是我最终得到了一个 React 警告，使我的测试结果变得困惑:

Warning: Unknown prop options on tag. Remove this prop from the element.

我正在模拟的组件确实有一个 options 属性，而且我真的不关心它是如何呈现的，那么我怎样才能以不会抛出警告的方式模拟它呢？我尝试在模拟中使用 React.createElement，并无休止地返回一个包含元素名称和 props 参数的数组。

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

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

Answer 1

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

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