reactjs – 使用Jest使用props模拟React组件

发布时间：2020-12-15 20:48:55 所属栏目：百科来源：网络整理

导读：我有一个React组件,其中包含一些依赖于访问Redux存储等的其他组件,这会在执行完整的Enzyme安装时导致问题.让我们说一个像这样的结构： import ComponentToMock from './ComponentToMock';ComponentToTest ...some stuff ComponentToMock testProp="This thro

我有一个React组件,其中包含一些依赖于访问Redux存储等的其他组件,这会在执行完整的Enzyme安装时导致问题.让我们说一个像这样的结构：

import ComponentToMock from './ComponentToMock';

<ComponentToTest>
  ...some stuff
  <ComponentToMock testProp="This throws a warning" />
</ComponentToTest>

我想使用Jest的.mock()方法来模拟子组件,因此它不是测试的关注点.

我知道我可以用以下方法嘲笑一个直的组件：

jest.mock(‘./ ComponentToMock’,()=>’ComponentToMock’);

但是,由于此组件通常会收到道具,因此React会感到不安,并会将未知道具(在本例中为testProp)的警告传递给< ComponentToMock />.

我已经尝试返回一个函数,但是由于它被挂起,你无法在Jest模拟中返回JSX(我能说的).在这种情况下它会引发错误.

所以我的问题是我怎么能

a)让ComponentToMock忽略传递给它的道具,或者

b)返回一个React组件,该组件可用于模拟我不担心测试的子组件.

或者,还有更好的方法？

为了防止吊装行为,docs for jest.mock()底部有一个注释：

Note: When using babel-jest,calls to mock will automatically be
hoisted to the top of the code block. Use doMock if you want to
explicitly avoid this behavior.

然后你可以按照你的描述去做：返回一个函数,它是你不需要测试的组件的存根.

jest.doMock('./ComponentToMock',() => {
  const ComponentToMock = () => <div />;
  return ComponentToMock;
});

const ComponentToTest = require('./ComponentToTest').default;

命名存根组件是有帮助的,因为它在快照中呈现.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!