用Jest模拟不需要的React组件

时间:2019-02-14 20:10:23

标签: javascript reactjs jestjs integration-testing enzyme

让我们假设我们有这个 Page 组件:

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

我想在集成测试中测试抽屉 Content 组件中的某些交互,并安装我们的 Page 组件,因此我会为 Topbar 组件编写一个模拟,因为我不需要它,

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

然后我们的测试将不会渲染该组件,从而增加了它的执行时间,并且由于引入了一些错误而使失败的可能性降低了,从而隔离了我们的功能。

我的问题是,每次需要在 Page 组件中添加新组件时,都必须执行与 Topbar 相同的操作。

我的问题是,是否有任何方法可以指定此集成测试所需的组件,而不是不需要的组件(正好相反)。例如,对于我当前正在测试的此功能,我只需要抽屉 Content 组件,因此无需渲染其他任何东西。

或者,有没有更好的方式编写集成测试而不需要模拟?

1 个答案:

答案 0 :(得分:1)

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

一种常见的测试策略是具有广泛的单元测试覆盖范围和限制性较小的E2E测试。可以将集成测试添加到需要更多关注的敏感单元。

以相同的方式模拟所有组件是不切实际的。在伪造的测试场景中,可以使用() => null来模拟任意组件,但是在实际场景中,这可能会导致父组件出现问题,因为它可能期望子代的行为不同于无操作组件。

在集成测试中测试所有可能的单元交互将导致过多的耦合。这样做的必要性意味着单元测试不彻底。这样的集成测试会导致很多额外的工作,而且几乎没有价值,因为它们没有考虑多个单元之间可能的交互作用。模拟单元可能会有所不同,从而使测试失败。

在这种情况下,对Page进行浅测试并声明它是Topbar的'哑'包装器等就足够了。孩子可以在各自的单元测试中进行测试。 / p>