使用 Jest 对 React 进行快照测试与 DOM 测试

本文例子的 GitHub 地址:https://github.com/codelegant/react-action

React 有自己的测试工具:Jest,就像 Angular 自己的 Karama

使用 Jest 测试 React,主要分两部分,快照测试(Snaptshot Testing)与 DOM 测试(DOM Testing)。

首先安装依赖:

然后配置package.json.babelrc。

Snapshot Testing

快照测试第一次运行的时候会将 React 组件在不同情况下的渲染结果(挂载前)保存一份快照文件。后面每次再运行快照测试时,都会和第一次的比较,除非使用npm test -- -u命令重新生成快照文件。

首先我们得有一个组件,后面的 DOM Testing 也会使用这个组件。

上面的组件拥有三种状态,初始状态,点击状态,以及再次被点击的状态。依此我们生成三种状态的快照。

然后在控制台运行npm test

快照测试的控制台输出
快照测试的控制台输出

就会生成__tests__\__snapshots__\LinkButton.snapshot-test.js.snap快照文件,打开文件,可以看到文件内容,里面包含组件的三种状态。

此时,如果我们修改LinkButton.js文件,比如将p标签中的文件修改为Me {text} this.Click to toggle,然后我们再次运行测试,控制台显示测试未通过,并将两次快照不核匹配的位置标记出来。这可以防止无意间修改组件的某些部分。

修改组件后快照测试未通过
修改组件后快照测试未通过

如果确实需要更新快照文件,使用npm run test -- -u命令。

DOM Testing

主要测试组件生成的 DOM 节点是否符合预期,比如响应事件之后,组件的属性与状态应该是怎样的。DOM Testing 依赖于官方的 TestUtil(主要用于操作 DOM,模拟事件等等),所以需要安装react-addons-test-utils。同样,编写对应的测试文件。

然后运行测试,控制台显示测试通过。

DOM 测试通过
DOM 测试通过

如果我们你快照测试中那样修改p元素的文本,再次测试,控制台显示测试不通过。

DOM 测试失败
DOM 测试失败

生成测试覆盖报告(coverage report)

使用命令npm test -- --coverage就可以生成测试覆盖报告。

测试覆盖报告的控制台输出
测试覆盖报告的控制台输出

同时,还会在根目录生成一个名为 coverage 的文件夹,是测试覆盖报告的网页版,包含更多,更详细的信息。测试覆盖报告的解读方法参考 stackoverflow 上的问答:How do I read an Istanbul Coverage Report?

发表评论

电子邮件地址不会被公开。 必填项已用*标注