React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
10740 人已学习
新⼈⾸单¥59
登录后,你可以任选2讲全文学习
课程目录
已完结/共 25 讲
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

18 | 单元测试:自定义 Hooks 应该如何进行单元测试?

你好,我是王沛。今天这节课我们来学习如何对 Hooks 进行单元测试。
在课程的一开始,我想首先强调一下单元测试的重要性。因为我发现很多同学在实现业务功能的时候,干劲十足,非常感兴趣。但是一旦要去写测试用例,就顿时觉得枯燥和无趣。
产生这种现象的原因,正是因为没有意识到测试的重要性,以及测试能给你带来的好处。要知道,最终应用的质量和稳定性在很大程度上决定着项目的成败,而为了保证软件的质量,唯一的途径其实就是测试
当然,测试带来的好处不仅体现在能够保证最终发布的应用的质量,更为重要的是,它能 ** 让你在开发新功能,或者修复 Bug 时,对自己做的改动更有信心。只要有足够的测试覆盖率,那么你就不用太担心自己的改动可能会破坏已有的功能。同时,单元测试还能够帮助你在开发过程中,更好地组织代码,追求模块的松耦合。
因为如果你时刻有意识地去思考自己的每一段代码该如何去测试,那么在实现代码时,就会自觉地去做模块的隔离,反过来提升了代码的质量。这也是为什么很多团队会推崇测试驱动开发的原因。
好了,测试的重要性就不多说了。接下来我们就进入正题,看看对于自定义 Hooks,应该怎么进行单元测试。课程的学习目标仍然是以总体把握为目标,更多地还是思考测试代码是如何运行的,以及测试框架提供了哪些能力帮助我们运行单元测试。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文介绍了如何对自定义 Hooks 进行单元测试,重点介绍了使用 Jest 和 React Testing Library 进行单元测试的步骤。首先强调了单元测试的重要性,包括保证应用质量、提升开发信心和代码质量。然后详细介绍了使用 Jest 进行单元测试的步骤,包括创建测试用例、断言验证测试结果和运行测试。接着,讲解了使用 React Testing Library 测试 React 组件的环境需求和功能,包括在内存中渲染组件、获取屏幕上的元素和进行断言判断。文章通过示例代码演示了如何创建测试组件来使用要测试的 Hooks,以及如何直接操作 Hooks API进行测试。最后介绍了@testing-library/react-hooks这个包,能更加语义化地去创建自定义 Hooks 的单元测试。文章以简洁清晰的语言,为读者提供了对自定义 Hooks 单元测试的全面了解。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Hooks 核心原理与实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(10)

  • 最新
  • 精选
  • GK
    请问如何在业务项目中推动单元测试的落地,大家都觉得单元测试重要,可最终都输给了业务的忙碌。

    作者回复: 1. 降低单元测试成本,比如提供脚本工具自动生成单元测试模板; 2. 让覆盖率成为指标

    2021-07-18
    9
  • 心若水,则长安
    我司的服务端要求单测覆盖率100%,但前端可以说几乎没有写单测的先例,如何系统性的学习前端单测这方面的知识呢?需要了解哪些东西

    作者回复: 这听上去不是技术问题,还是因为前端没人要求做这个:-)并不需要所谓系统性学习,大部分的单元测试是比较容易的,文中提到的 testing-library 就能完成大部分需求了。

    2021-07-31
    4
  • QL
    根据我的理解,react hook和redux它们似乎都推荐函数式用法, 在实际业务模块开发中,因为封装的需要,我们可能会去封装一些模块类,或工具类, 不知道在你们的实践过程中,对于前端开发, 你们的单元测试更多的是在写类的单元测试还是在写函数的单元测试? 什么情况下推荐将方法封装成类,什么情况下直接以纯函数的方式调用更佳?

    作者回复: 单元测试对于类和函数是一样的,两个都是一样测试。使用函数还是类更多取决于个人的习惯,个人感觉不用做强制的规定,合理就行。在我参与的项目中,基本都是函数写法。

    2021-08-06
    1
  • Bug般的存在
    道理我都懂,但就是不想写,测试代码比业务代码还多,看着都累。。。
    2021-07-06
    1
    26
  • 发芽的紫菜
    如果要求写单元测试,那是不是在开发前,也要把写单元测试的工作量规划进去?还有后续维护单元测试的工作量?我司目前只是自测+测试来测,感觉业务都写完,根本不可能给多的时间专门让你来写单元测试的
    2021-07-06
    13
  • Geek_4116d8
    把工作留给测试,增加社会就业岗位。
    2022-06-27
    1
    3
  • 独钓寒江雪
    从示例来看,act之后马上进行同步断言,那么,act是如何保证在回调函数执行完成后,还会等 React 组件的生命周期都执行完毕的呢?
    2021-10-23
    3
  • Brave
    hook只能在函数组件或者自定义hook中使用,因此这里的callback函数应该是被当做自定义hook调用的
    2021-08-31
    1
  • 鲁滨逊
    renderHook内部难道还生成了 wrapper 节点,然后返回节点的 ref ? 为什么要这样做呢 ? 直接像第二种写法一样,返回 Hook 的结果不是很简易吗?
    2022-06-24
    1
  • CondorHero
    老师我有个问题,就是项目使用 create-react-app 创建的,当我在根目录 tests 目录下,创建一个 xxx.test.js ,我试图通过绝对路径引用一个组件 InputNumber,对它进行测试: ``` import InputNumber from "src/components/InputNumber"; ``` 这时候 npm run test 就会报错: ``` FAIL tests/InputNumber.test.js ● Test suite failed to run Cannot find module 'src/components/InputNumber' from 'tests/InputNumber.test.js' ``` 绝对路径 src 我配置了,在 App.js 能够使用的。 想问 xxx.test.js 是不是不能使用绝对路径,只能相对路径引用,如果相对路径引用,这好麻烦。
    2021-08-26
    2
收起评论
显示
设置
留言
10
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部