Question

我有AccountSelection，呈现AccountSelectionModal。

我想mount来测试用户互动的某些方面：

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

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

当我用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的第二个参数是函数，它返回您想要返回的任何内容，并且由于您想要模拟一个组件，因此该函数应该返回一个< strong>有效反应组件（现在它正在返回一个字符串）。

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

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

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

你也可以返回一个字符串，但它应该是小写的（contains短划线），这样它就会被视为一个自定义元素，而不是一个反应元素。

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

模仿开玩笑导致警告：正确的套管，标签无法识别和未知属性

1 个答案: