你如何用 Jest 模拟一个有道具的反应组件？
How do you mock a react component with Jest that has props?
一定有一种简单的方法可以做到这一点，但我在任何地方都找不到文档化的语法。我有一个带有道具的 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']}
/>
您正在使用字符串作为第二个参数来模拟组件。这是不寻常的，因为 jest.mock 函数需要一个函数作为第二个参数。该字符串可能适用于您的测试（取决于它的呈现方式），但它在 Jest's documentation 中是未定义的行为，可能是导致您出现问题的原因。而是传递一个 returns 组件的函数。这是一个传递简单功能组件的组件，该组件仅将名称传回：
jest.mock('./common/MultiSelect', () => () =><span>MultiSelect</span>);
在试用之后，我意识到我返回的组件的语法有误。像这样模拟它有效：
jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => () => <div />);
像这样嘲笑它不会（这就是我正在做的）：
jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => <div />);
警告甚至告诉我这个问题，但我误解了它：
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: object. Check the render method of Termination.
我发现以下模拟模式在您想查看 Jest 快照中提供的组件名称和道具的情况下很有用：
jest.mock('./common/MultiSelect', () => (props) => <mock-MultiSelect {...props} />);
一定有一种简单的方法可以做到这一点，但我在任何地方都找不到文档化的语法。我有一个带有道具的 React 组件，我想像这样在 Jest 中模拟它：
jest.mock('./common/MultiSelect', 'MultiSelect');
这行得通，除了我最终收到一个 React 警告，使我的测试结果变得混乱：
Warning: Unknown prop
optionson tag. Remove this prop from the element.
我正在模拟的组件确实有一个 options 道具，我真的不在乎它是如何呈现的，所以我怎样才能以不会抛出警告的方式模拟它？我试过在模拟中使用 React.createElement，并返回一个包含元素名称和 props 参数的数组，直到没有结束。
我要模拟的组件是这样使用的：
<MultiSelect
options={['option 1', 'option 2']}
/>
您正在使用字符串作为第二个参数来模拟组件。这是不寻常的，因为 jest.mock 函数需要一个函数作为第二个参数。该字符串可能适用于您的测试（取决于它的呈现方式），但它在 Jest's documentation 中是未定义的行为，可能是导致您出现问题的原因。而是传递一个 returns 组件的函数。这是一个传递简单功能组件的组件，该组件仅将名称传回：
jest.mock('./common/MultiSelect', () => () =><span>MultiSelect</span>);
在试用之后，我意识到我返回的组件的语法有误。像这样模拟它有效：
jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => () => <div />);
像这样嘲笑它不会（这就是我正在做的）：
jest.mock('../../../../../common/components/MultiSelect/MultiSelect', () => <div />);
警告甚至告诉我这个问题，但我误解了它：
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of
Termination.
我发现以下模拟模式在您想查看 Jest 快照中提供的组件名称和道具的情况下很有用：
jest.mock('./common/MultiSelect', () => (props) => <mock-MultiSelect {...props} />);