使用Jest模拟带有道具的React组件

Question

我有一个React组件，其中包含一些其他组件，这些组件依赖于对Redux存储等的访问，这会在执行完整的酶安装时引起问题。假设这样的结构：

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组件，该组件可用于模拟我不担心测试的子组件。

或者，还有更好的方法？

Answer 1

在文档jest.mock()底部有一条注释，用于防止起吊行为：

注意：使用时babel-jest，对的调用mock将自动提升到代码块的顶部。使用doMock，如果你想明确地避免这种行为。

然后，您可以按照说明进行操作：返回一个函数，该函数是不需要测试的组件的存根。

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

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

命名存根组件很有帮助，因为它会在快照中呈现。