创建一个 test/jestsetup.js 的文件来自定义 Jest 的运行环境(上面的 setupFiles 配置项)
import Enzyme, { shallow, render, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
// React 16 Enzyme adapter
Enzyme.configure({ adapter: new Adapter() });
// Make Enzyme functions available in all test files without importing
global.shallow = shallow;
global.render = render;
global.mount = mount;
有的时候如果你想测试的更精确和看到真实的值。那样的话需要在 Enzyme API 中使用 Jest的 断言。
test('render a document title', () => {
const wrapper = shallow(
<DocumentTitle title="Events" />
);
expect(wrapper.prop('title')).toEqual('Events');
});
test('render a document title and a parent title', () => {
const wrapper = shallow(
<DocumentTitle title="Events" parent="Event Radar" />
);
expect(wrapper.prop('title')).toEqual('Events — Event Radar');
});
有的时候你不能用快照。比如组件里面有随机ID像下面的代码:
test('render a popover with a random ID', () => {
const wrapper = shallow(
<Popover>Hello Jest!</Popover>
);
expect(wrapper.prop('id')).toMatch(/Popover\d+/);
});
- export default const Button = ({ children }) => {
+ export default function Button({ children }) {
requestAnimationFrame 错误
当你运行你的测试时,你可能会看到如下错误:
console.error node_modules/fbjs/lib/warning.js:42
Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. http://fb.me/react-polyfills
使用 Jest 和 Enzyme 测试 React 组件
引言
有人说在通常情况下测试 React 组件是没有太大用处的,但是我觉着在一些场景下是很有必要的:
我尝试过很多的工具组合,但是最终如果会推荐给别的开发者,我更乐意去择推荐如下组合:
我经常在测试中使用的是浅渲染和 Jest 快照测试。
在 Jest 进行快照测试
Shallow rendering
浅渲染指的是将一个组件渲染成虚拟 DOM 对象,但是只渲染第一层,不渲染所有子组件。所以即使你对子组件做了一下改动却不会影响浅渲染的输出结果。或者是引入的子组件中发生了 bug,也不会对父组件的浅渲染结果产生影响。浅渲染是不依赖 DOM 环境的。
举个例子:
在 React 中将会被渲染成如下:
但是在浅渲染中只会被渲染成如下结果:
需要注意的是 Icon 组件并未被渲染出来。
快照测试
Jest 快照就像那些带有由文本字符组合而成表达窗口和按钮的静态UI:它是存储在文本文件中的组件的渲染输出。
你可以告诉 Jest 哪些组件输出的 UI 不会有意外的改变,那么 Jest 在运行时会将其保存到如下所示的文件中:
每次更改组件时,Jest 都会与当前测试的值进行比较并显示差异,并且会在你做出修改是要求你更新快照。
除了测试之外,Jest 将快照存储在类似
__snapshots __ / Label.spec.js.snap
这样的文件中,同时你需要提交这些文件。为什么选择 Jest
为什么选择 Enzyme
配置
第一步安装所有的依赖包括同版本依赖:
还需要安装 Babel 插件 babel-jest 或者 TypeScript 插件 ts-jest
更新工程的 package.json 文件:
配置项 'snapshotSerializers' 允许你通过配置 'enzyme-to-json',把 Enzyme 的封装类型传给 'Jest' 的快照匹配项中,从而不需要手动进行转化。
创建一个 test/jestsetup.js 的文件来自定义 Jest 的运行环境(上面的 setupFiles 配置项)
针对 css 模块也可以添加下面的配置到package.json
And run:
同时安装依赖:
注意 identity-obj-proxy 依赖的 node 版本是 Node 4或者 Node 5需要开启 'harmony-proxies'
测试组件的渲染
对于大部分没有交互的组件,下面的测试用例已经足够:
Props 测试
有的时候如果你想测试的更精确和看到真实的值。那样的话需要在 Enzyme API 中使用 Jest的 断言。
有的时候你不能用快照。比如组件里面有随机ID像下面的代码:
事件测试
你可以模拟类似 'click' 或者 'change'这样的事件然后把组件和快照做比较:
有的时候你想要测试一个子组件中一个元素是怎样影响组件的。你需要使用 Enzyme的 mount 方法来渲染一个真实的 DOM。
测试事件处理
类似于在事件测试中,由使用快照测试组件的输出呈现替换为使用Jest的mock函数来测试事件处理程序本身:
不仅仅是JSX
Jest使用JSON进行快照测试,因此你可以测试返回JSON的任何函数,方法与测试组件相同:
调试与故障排除
调试浅层渲染器输出
Use Enzyme’s debug method to print shallow renderer’s output: 使用Enzyme的调试方法打印千层渲染器的输出:
启用覆盖范围的失败测试
当你的测试失败时,带有覆盖范围标志的diff如下所示:
尝试将箭头函数组件替换为常规函数组建:
requestAnimationFrame 错误
当你运行你的测试时,你可能会看到如下错误:
React 16依赖于
requestAnimationFrame
,因此你需要在你的测试代码中添加一个polyfill参考来源