我有一个 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 组件,该组件可用于模拟我不担心测试的子组件。
或者,还有更好的方法?
原文由 Mike Hopkins 发布,翻译遵循 CC BY-SA 4.0 许可协议
文档底部有一条注释
jest.mock()
用于防止提升行为:然后你可以按照你的描述做:返回一个函数,它是你不需要测试的组件的存根。
命名存根组件会很有帮助,因为它会在快照中呈现。