用 Jest 模拟不需要的 React 组件

Question

假设我们有这个 Page 组件：

const Page = () =>
  <>
    <Topbar />
    <Drawer />
    <Content />
  </>

我想在集成测试中测试 Drawer 和 Content 组件中的一些交互，安装我们的 Page 组件，所以我会为 Topbar 组件编写一个模拟，因为我不需要它，其中：

jest.mock('./Topbar', () => {
  const TopbarMock = () => null
  return TopbarMock
})

然后我们的测试将不会呈现此组件，增加其执行时间，并且由于那里引入的某些错误而导致失败的可能性较小，从而隔离了我们的功能。

我遇到的问题是，每次我需要在 Page 组件中添加一个新组件时，我都必须为顶栏.

我的问题是，是否有任何方法可以指定此集成测试所需的组件，而不是不需要的组件（正好相反）。比如，对于我目前正在测试的这个功能，我只需要 Drawer 和 Content 组件，所以不要渲染还有什么。

或者，有没有更好的方法来编写集成测试而不需要模拟？

Answer 1

Enzyme 中没有这样的功能，因为这是不常见的测试策略。

一个常见的测试策略是拥有广泛的单元测试覆盖率和较少限制的 E2E 测试。集成测试可以添加到需要更多关注的敏感单元。

以相同的方式模拟所有组件是不切实际的。在 made-up 测试场景中，使用 () => null 模拟任意组件可以工作，但在 real-world 场景中，这可能会导致 parent 组件出现问题，因为它可能期望 children 表现良好不同于 no-op 组件。

在集成测试中测试所有可能的单元交互会导致太多对。这样做的必要性意味着单元测试并不彻底。此类集成测试导致大量额外工作但价值很小，因为它们没有考虑多个单元之间可能的交互。模拟单元可能会导致测试失败。

在这种情况下，对 Page 进行单元测试就足够了，它可以进行浅层渲染并断言它是 Topbar 的 'dumb' 包装器，等等。Children 可以是在各自的单元测试中进行了测试。

Mock not-needed React components with Jest