如何通过浅层安装Reaction功能组件来对Reaction挂钩进行单元测试？

问题描述

有没有办法通过浅层挂载组件来测试使用Reaction钩子构建的功能组件。我遇到了酶不支持useEffect(https://airbnb.io/enzyme/#react-hooks-support)和其他浅呈现组件的钩子，我不想挂载。

也遇到了react-testing-library是一个新的流行的替代方案。与酵素相比，它是更好的选择吗？我已经使用Enzyme来测试基于类的组件。因此，重写这些内容是一件痛苦的事情。

推荐答案

可以，但需要使用间谍。例如，如果您正在使用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
  })
}

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

---

虽然它很有效，但我建议您不要使用shallow渲染，而是开始使用react-testing-library(现在称为@testing-library/react)，这是它的文档齐全的轻量级测试解决方案，我想说这是您可以得到的最接近真实世界场景的测试。默认情况下，它已经附带了CRA。

这里是一个基本的codeSandbox示例，下面是Reaction文档中的更多examples。

还有VideobyKent C. Dodds，它解决了shallow呈现与Reaction测试库中render方法之间的差异。

这篇关于如何通过浅层安装Reaction功能组件来对Reaction挂钩进行单元测试？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！