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

Question

必须有一个简单的方法来做到这一点,但我无法在任何地方找到记录的语法.我有一个带有支柱的React组件,我想在Jest中嘲笑这样:

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

这是有效的,除了我最终得到一个反应警告混乱我的测试结果:

警告:options标记上的未知道具.从元素中删除此prop.

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

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

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

Answer 1

我发现以下模拟模式在您想要查看 Jest 快照中提供的组件名称和属性的情况下很有用：

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

Answer 2

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

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