如何通过浅层安装 React 功能组件对反应钩子进行单元测试？答案

【问题标题】：How to unit test react hooks by shallow mounting React Functional components?如何通过浅层安装 React 功能组件对反应钩子进行单元测试？
【发布时间】：2020-05-15 18:56:17
【问题描述】：

有没有办法通过浅层安装组件来测试使用 React 钩子构建的功能组件。我遇到了 Enzyme 不支持 useEffect (https://airbnb.io/enzyme/#react-hooks-support) 和其他浅渲染组件的钩子，我不想进入 mount。

还发现react-testing-library 是一种新的流行替代方案。与酶相比，它是更好的选择吗？我已经有Enzyme 用于测试基于类的组件。所以，重写这些是很痛苦的。

【问题讨论】：

有什么理由不想完全渲染它？尽管使用mount 很麻烦（尤其是在渲染连接组件时），但我仍然认为这是测试其行为的最直接方法
@wentjun 我想将每个组件作为一个单元单独测试，因此我更喜欢浅层。
啊，我明白了.. 有道理。在那种情况下，我也会更喜欢浅渲染。

标签： reactjs jestjs enzyme react-testing-library

【解决方案1】：

可以，但需要使用间谍。例如，如果您使用jest，您可以将jest.spyOn 与mockImplementationOnce() 一起使用，它也应该与其他spying 库一起使用。

使用示例：

describe("React useEffect", () => {
  let useEffect, wrapper

  let mockUseEffect = () => {
    useEffect.mockImplementationOnce(f => f())
  }

  beforeEach(() => {
    useEffect = jest.spyOn(React, "useEffect")

    mockUseEffect()
    wrapper = shallow(<SomeComponent />)
  })

  it("your test", () => {
     // using wrapper
  })
}

这是“Will Ockelmann-Wagner”的详细article，我添加了一个codeSandbox 工作示例。

虽然它有效，但我鼓励您不要使用shallow 渲染并开始使用react-testing-library（现在称为@testing-library/react），它有据可查、轻量级的测试解决方案，以及我会说它是您可以达到现实世界场景的“最接近”的测试。默认情况下，它已经带有CRA。

这是一个基本的 codeSandbox 示例，这是来自 React Docs 的更多 examples。

另外，Kent C. Dodds 提供的 Video 很好，它解决了 shallow 渲染和来自 react 测试库的 render 方法之间的差异。

【讨论】：

感谢您提供详细解释的答案！最近阅读了 react-testing-library。发现它使用full mount，不支持shallow。如果是这样的话，即使是酶也可以很好地使用安装测试功能组件中的钩子。那么为什么要 react-testing-library 呢？
我实际上并不仅仅在谈论钩子，而是一般来说为什么要考虑使用 RTL 进行测试。 RTL 就像强迫您编写更好的测试逻辑，而不是进行可能专注于实现而不是组件功能的“浅层”测试。它关于视角实际上不是方式。
例如，当使用 Enzyme 渲染组件时，它允许您访问整个组件的数据（props、state、children，...），这主要导致您测试其实现，RTL 有不同的方法，您只能访问 DOM 中的元素，没有内部状态，没有方法，只有用户可以与之交互的内容。因此，这将导致您重新考虑如何以及测试什么。 RTL 测试更侧重于最终用户行为。
“我们推荐使用 React 测试库，它旨在支持和鼓励编写测试，像最终用户一样使用你的组件。或者，Airbnb 发布了一个名为 Enzyme 的测试实用程序，它可以很容易地断言、操作和遍历你的 React 组件的输出。” Docs
我很高兴能提供帮助。顺便说一句，Kent C. Dodds（RTL 的作者）有一个很棒的 YouTube 频道，其中包含大量专业且非常有用的内容。