前端单元测试框架 引入说明

1. 背景:

2. 如何选择:

2.1. 流行框架
  • **Jest:**由Facebook开源的JavaScript测试框架,应用于脸书系以及 ReactJs 系
  • **Mocha:**适用于 NodeJs 和 浏览器、简易、灵活、有趣的JavaScript 测试框架
  • **Jasmine:**BDD(行为驱动开发)测试框架,不依赖于browsers、DOM以及JS,适合websites、NodeJs项目
2.2. 性能对比

|-------------|------|------|-----|----------|-----------|
| 测试框架 | 断言 | Mock | 异步 | 快照 | React友好程度 |
| Jest | 默认支持 | 默认支持 | 友好 | 默认支持 | 高 |
| Mocha | 不支持 | 不支持 | 友好 | 不支持(可配置) | 中 |
| Jasmine | 默认支持 | 默认支持 | 不友好 | 默认支持 | 中 |

2.3. 框架选择

选择Jest作为daizong项目的前端单元测试框架

  • Jest是当前最流行的测试框架,尤其在React生态系统中应用广泛
  • 我们项目使用Ant Desgin作为UI组件库,而Ant Desgin它们选择的测试框架是Jest
  • 我们项目使用Umi4作为脚手架,而Umi4对Jest框架具有很好的支持
2.4. 测试库选择

要想对项目里的组件进行单元测试,仅仅Jest是不够的,还需要一款可以提供 DOM API的环境的库,即模拟浏览器环境。这样对组件进行单元测试时,就像真的运行在浏览器上测试。

针对React流行的测试库主要有两个:Enzyme 、React Testing Library

  • React官方推荐使用 React Testing Library作为测试库
  • Umi4 对 React Testing Library有更多的支持
  • React Testing Library 更倾向于事件驱动,更偏向模拟用户操作,而 Enzyme 对代码测试是通过控制代码状态来完成的,已逐渐被抛弃

因此,选择React Testing Library 作为测试库

3. 接入项目:

3.1. 小试牛刀

对项目关键字高亮基础组件写单元测试用例

3.1.1. 用例代码
3.1.2. 测试效果
npx jest --watch
3.1.3. 意义体现

单元测试的意义会在修改组件时体现。 上面给组件写了一个正常使用组件的测试用例,如果此时,我们修改组件代码,新增精准匹配,区分大小写的功能再运行测试用例 (不考虑兼容)。

  • 断言错误
  • 快照发生改变

测试用例不通过,证明会影响到原来组件的业务。

3.2. 如何展开

单元测试能保证函数、Hook、组件等代码单元的功能正常,把手动测试变成自动化测试。

但是写单元测试成本还是挺高的,如果代码改动频繁,那手动测试更合适。一些比较稳定的代码,还是有必要写单测的,写一次,自动测试 n 次,收益很大。

3.2.1. 测试目标
  • 核心的基础组件
  • 核心的工具函数
  • 稳定的公共组件
3.2.2. 测试规范
  • **保持测试简洁和明确:**每个测试只关注一个行为或功能,避免过于复杂。
  • **使用描述性命名:**测试名称应清晰描述其测试的功能或行为。
  • **避免过度模拟:**只模拟必要的依赖,保持测试的真实性。

reference:

快速开始 · Jest

Introduction | Testing Library

相关推荐
Mr.Liu613 分钟前
小程序24-滚动效果:scroll-view组件详解
前端·微信小程序·小程序
三金1213829 分钟前
局部使用Vue
前端·javascript·vue.js
LinXunFeng35 分钟前
Flutter - 子部件任意位置观察滚动数据
前端·flutter·开源
好开心331 小时前
js高级06-ajax封装和跨域
开发语言·前端·javascript·ajax·okhttp·ecmascript·交互
小镇程序员1 小时前
vue2 src_Todolist消息订阅版本
前端·javascript·vue.js
Zack No Bug1 小时前
解决报错:rror: error:0308010C:digital envelope routines::unsupported
前端·javascript·vue.js
九幽归墟1 小时前
深入理解 CPU 和 GPU 渲染
前端·浏览器·gpu
凌虚2 小时前
Web 端语音对话 AI 示例:使用 Whisper 和 llama.cpp 构建语音聊天机器人
前端·人工智能·后端
小宇python2 小时前
Web应用安全入门:架构搭建、漏洞分析与HTTP数据包处理
前端·安全·架构
伊泽瑞尔2 小时前
关于什么是前端架构师的讨论
前端·架构