如何通过浅层安装Reaction功能组件来对Reaction挂钩进行单元测试? [英] How to unit test react hooks by shallow mounting React Functional components?

查看:13
本文介绍了如何通过浅层安装Reaction功能组件来对Reaction挂钩进行单元测试?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

推荐答案

可以,但需要使用间谍。例如,如果您正在使用jest,您可以将jest.spyOnmockImplementationOnce()一起使用,它也应该可以与其他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挂钩进行单元测试?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆