编写单元测试
icejs 提供了 icejs test
命令,内置了 Jest 相关配置。
#
快速开始在项目中手动安装 jest 依赖:
在 package.json 中添加对应 scripts:
接下来执行 npm test
即可运行测试用例。
#
编写测试用例#
测试文件名约定默认的 testMatch
为 **/?*.(spec|test).(j|t)s?(x)
,即 icejs 将查找项目目录下所有符合条件的文件来执行测试
- 文件后缀为
.spec.js
、.spec.jsx
、.spec.ts
、.spec.tsx
- 文件后缀为
.test.js
、.test.jsx
、.test.ts
、.test.tsx
#
编写用例使用 Jest 提供的内置函数可以快速创建相应的测试用例
在日常 React 项目开发中,上述简单的例子不足以满足测试需求,测试实践中的需求往往可以可以分为两类,根据相应的需求可以选择社区的工具来帮助完成测试。
- 通过快照进行 UI 测试 - 可以通过 Jest SnapShot 能力进行测试
- DOM 交互测试 - 推荐使用 Enzyme,它提供了强大的 API 能力支持 UI 交互测试
#
使用 Snapshot 进行 UI 测试Snapshot 测试是 Jest 提供的能力,可以自动生成组件 UI 输出的描述文件,确保你的 UI 不会发生意外的改变。
组件实现代码:
组件测试代码:
在第一次运行后,Jest Snapshot 将会生成对应的 .snap
文件,如果组件的输出内容发生变更,则会导致测试用例无法通过。
#
使用 Enzyme 测试组件Enzyme 是 Airbnb 提供的测试类库,它提供了一套简洁强大的 API。能够灵活操作 DOM,是 React 社区推荐的测试方案。
#
准备工作安装测试相关依赖包
基于 React 开发的测试,需要安装对应的 React Adapter 来保证 enzyme 渲染的版本和项目中使用的版本一致,以 react 16 版本为例,需要进行如下设置:
如果不想每个测试用例都去定义一遍,可以将上述内容保存至 src/setupTests.js
文件中,并自定义 Jest 配置中的 setupFilesAfterEnv
:
#
组件测试用例Enzyme 提供 shallow 方法对组件进行浅渲染,即它仅仅会渲染至虚拟 DOM,不会返回真实的 DOM 节点。多数情况下 shallow 方法就能满足测试需求。
组件实现代码:
使用 shallow 方法测试组件:
更多测试用例编写,可以参考 Enzyme 官网
#
高阶用法#
自定义 jest 配置icejs
已经内置了 Jest 测试所需的配置,提供了开箱即用的测试能力,如果需要定制自己的 Jest 配置,可以在项目目录下添加 jest.config.js
文件。
jest.config.js 中自定义配置最终将和默认配置进行合并,更多 Jest 相关配置,请参见官网。
#
使用 Jest CLI 参数icejs
通过约定的方式支持所有 Jest CLI 参数,相关参数增加 jest 前缀即可。