带有笑话的模拟会导致警告：正确的大小写，无法识别标签和未知属性

Question

我有AccountSelection，那呈现AccountSelectionModal。

mount为了测试用户交互的某些方面，我想做：

const wrapper = mount(<AccountSelection {...accountSelectionComponentParams} />);

但是我想模拟AccountSelectionModal- 我不需要它（它也是连接组件，我不想在我的测试中使用 store ）。

当我嘲笑它时 jest.mock('../AccountSelectionModal', () => 'AccountSelectionModal');

我开始收到很多警告：

Warning: <AccountSelectionModal /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
    console.error node_modules\fbjs\lib\warning.js:33

和

Warning: The tag <AccountSelectionModal> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

或者

Warning: Unknown event handler property `onHide`. It will be ignored.

或者

React does not recognize the `selectedAccountId` prop on a DOM element. If you intentionally want it to appear in the DOM as
a custom attribute, spell it as lowercase `selectedaccountid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

所有警告都来自设置在 上的道具AccountSelectionModal。

我该如何正确模拟 AccountSelectionModal

Answer 1

您传递给的第二个参数mock是一个函数，该函数返回您希望它返回的任何内容，并且由于您想要模拟一个组件，因此该函数应该返回一个有效的react 组件（现在它返回一个字符串）。

这就是你应该如何模拟你的组件。

jest.mock('../AccountSelectionModal', () => () => 'AccountSelectionModal');

（注意传递给的函数mock现在如何返回一个函数）

您也可以返回一个字符串，但它应该是小写的（包含破折号），这样它就会被视为自定义元素而不是反应元素。

 jest.mock('../AccountSelectionModal', () => 'account-selection-modal');