我有一个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@H_301_28@,calls tomock@H_301_28@ will automatically be
hoisted to the top of the code block. UsedoMock@H_301_28@ if you want to
explicitly avoid this behavior.
然后你可以按照你的描述去做：返回一个函数,它是你不需要测试的组件的存根.
jest.doMock('./ComponentToMock',() => {
const ComponentToMock = () => <div />;
return ComponentToMock;
});
const ComponentToTest = require('./ComponentToTest').default;
命名存根组件是有帮助的,因为它在快照中呈现.
