首页 文章

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

提问于
浏览 次
6

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

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

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

警告：标签上的未知道具选项 . 从元素中删除此prop .

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

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

<MultiSelect
options={['option 1', 'option 2']}
/>
reactjs unit-testing enzyme jest

2 回答

  • 5

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

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

    回复于
  • 2

    在玩完它之后，我意识到我的返回组件的语法有误 . 嘲笑它像这样工作：

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

    像这样 Mock 它不会（这就是我在做的）：

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

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

    警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object . 检查终止的渲染方法 .

    回复于

相关问题