网易云团队前端单元测试技术方案总结（四） - 51Testing软件测试论坛

　// js/avatar.js
　　function Image({ src }) {
　　 return <img src={src} />;
　　}
　　function Living({ children }) {
　　 return <div className="icon-living"> { children } </div>;
　　}
　　function Avatar({ user, onClick }) {
　　 const { living, avatarUrl } = user;
　　 return (
　　 <div className="container" onClick={onClick}>
　　 <div className="wrapper">
　　 <Living >
　　 <div className="text"> 直播中 </div>
　　 </Living>
　　 </div>
　　 <Image src={avatarUrl} />
　　 </div>
　　 )
　　}
　　export default Avatar;

复制代码

shallow 渲染虽然不是真正的渲染，但是其组件生命周期会完整地走一遍。
　　使用 shallow(<Avatar />) 能感知到的结构如下, 注意看到 div.text 作为 Living 组件的 children 能够被检测到，但是 Living 的内部结构无法感知。
[attach]133607[/attach]
　Enzyme 支持的选择器支持我们熟悉的 css selector 语法，这种情况下我们可以对 DOM 结构做如下测试：

　// test/avatar.test.js
　　import Avatar from '../js/avatar';
　　describe('Avatar', () => {
　　 let wrapper = null, avatarUrl = 'abc';
　　 beforeEach(() => {
　　 wrapper = shallow(<Avatar user={{ avatarUrl: avatarUrl }} />);
　　 })
　　 afterEach(() => {
　　 wrapper.unmount();
　　 jest.clearAllMocks();
　　 })
　　 it ('should render success', () => {
　　 // wrapper 渲染不为空
　　 expect(wrapper).not.toBeEmptyRender();
　　 // Image 组件渲染不为空, 这里会执行 Image 组件的渲染函数
　　 expect(wrapper.find('Image')).not.toBeEmptyRender();
　　 // 包含一个节点
　　 expect(wrapper).toContainMatchingElement('div.container');
　　 // 包含一个自定义组件
　　 expect(wrapper).toContainMatchingElement("Image");
　　 expect(wrapper).toContainMatchingElement('Living');
　　 // shallow 渲染不包含子组件的内部结构
　　 expect(wrapper).not.toContainMatchingElement('img');
　　 // shallow 渲染包含 children 节点
　　 expect(wrapper).toContainMatchingElement('div.text');
　　 // shallow 渲染可以对 children 节点内部结构做测试
　　 expect(wrapper.find('div.text')).toIncludeText('直播中');
　　 })
　　})

复制代码

如果我们想去测试对应组件的 props / state 也可以很方便测试，不过目前存在缺陷，Class Component 能通过 toHaveProp, toHaveState 直接测试，但是 Hook 组件无法测试 useState 。

　it ('Image component receive props', () => {
　　 const imageWrapper = wrapper.find('Image');、
　　 // 对于 Hook 组件目前我们只能测试 props
　　 expect(imageWrapper).toHaveProp('src', avatarUrl);
　　})

复制代码

wrapper.find 虽然会返回同样的一个 ShallowWrapper 对象，但是这个对象的子结构是未展开的，如果想测试imageWrapper 内部结构，需要再 shallow render 一次。

　it ('Image momponent receive props', () => {
　　 const imageWrapper = wrapper.find('Image').shallow();
　　 expect(imageWrapper).toHaveProp('src', avatarUrl);
　　 expect(imageWrapper).toContainMatchingElement('img');
　　 expect(imageWrapper.find('img')).toHaveProp('src', avatarUrl);
　　})

复制代码

也可以改变组件的 props, 触发组件重绘。

it ('should rerender when user change', () => {
　　 const newAvatarUrl = '' + Math.random();
　　 wrapper.setProps({ user: { avatarUrl: newAvatarUrl }});
　　 wrapper.update();
　　 expect(wrapper.find('Image')).toHaveProp('src', newAvatarUrl);
　　})

复制代码

另一个常见的场景是事件模拟，事件比较接近真实测试场景，这种场景下使用 shallow 存在诸多缺陷，因为 shallow 场景事件不会像真实事件一样有捕获和冒泡流程，所以此时只能简单的触发对应的 callback 达到测试目的。

　it ('will call onClick prop when click event fired', () => {
　　 const fn = jest.fn();
　　 wrapper.setProps({ onClick: fn });
　　 wrapper.update();
　　 // 这里触发了两次点击事件，但是 onClick 只会被调用一次。
　　 wrapper.find('div.container').simulate('click');
　　 wrapper.find('div.wrapper').simulate('click');
　　 expect(fn).toHaveBeenCalledTimes(1);
　　})

复制代码

关于这些网上有人总结了 shallow 模式下的一些不足：
　　1.hallow 渲染不会进行事件冒泡，而 mount 会。
　　2.shallow 渲染因为不会创建真实 DOM，所以组件中使用 refs 的地方都无法正常获取，如果确实需要使用 refs , 则必须使用 mount。
　　3.simulate 在 mount 中会更加有用，因为它会进行事件冒泡。
　　其实上面几点说明了一个现象是 shallow 往往只适合一种理想的场景，一些依赖[url=]浏览器[/url]行为表现的操作 shallow 无法满足，这些和真实环境相关的就只能使用mount了。
　　Mount 渲染
　　Mount 渲染的对象结构为 ReactWrapper 其提供了和 ShallowWrapper 几乎一样的 API , 差异很小。
　　在 API层面的一些差异如下:

+ getDOMNode() 获取DOM节点
　　+ detach() 卸载React组件，相当于 unmountComponentAtNode
　　+ mount() 挂载组件，unmount之后通过这个方法重新挂载
　　+ ref(refName) 获取 class component 的 instance.refs 上的属性
　　+ setProps(nextProps, callback)
　　- setProps(nextProps)
　　- shallow()
　　- dive()
　　- getElement()
　　- getElements()

复制代码

　另外由于 mount 使用 ReactDOM 进行渲染，所以其更加接近真实场景，在这种模式下我们能观察到整个 DOM 结构和React组件节点结构。
[attach]133608[/attach]

　describe('Mount Avatar', () => {
　　 let wrapper = null, avatarUrl = '123';
　　 beforeEach(() => {
　　 wrapper = mount(<Avatar user={{ avatarUrl }} />);
　　 })
　　 afterEach(() => {
　　 jest.clearAllMocks();
　　 })
　　 it ('should set img src with avatarurl', () => {
　　 expect(wrapper.find('Image')).toExist();
　　 expect(wrapper.find('Image')).toHaveProp('src', avatarUrl);
　　 expect(wrapper.find('img')).toHaveProp('src', avatarUrl);
　　 })
　　})

复制代码

在 shallow 中无法模拟的事件触发问题在 mount 下就不再是问题。

it ('will call onClick prop when click event fired', () => {
　　 const fn = jest.fn();
　　 wrapper.setProps({ onClick: fn });
　　 wrapper.update();
　　 wrapper.find('div.container').simulate('click');
　　 wrapper.find('div.wrapper').simulate('click');
　　 expect(fn).toHaveBeenCalledTimes(2);
　　})

复制代码

总结一下 shallow 中能做的 mount 都能做，mount中能做的 shallow 不一定能做。
　　Render 渲染
　　render 内部使用 react-dom-server 渲染成字符串，再经过 Cherrio 转换成内存中的结构，返回 CheerioWrapper 实例，能够完整地渲染整个DOM 树，但是会将内部实例的状态丢失，所以也称为 Static Rendering 。这种渲染能够进行的操作比较少，这里也不作具体介绍，可以参考官方文档。
　　总结
　　如果让我推荐的话，对于真实浏览器我会推荐 Karma + Jasmine 方案测试，对于 React 测试 Jest + Enzyme 在 JSDOM 环境下已经能覆盖大部分场景。另外测试 React组件除了 Enzyme 提供的操作， Jest 中还有很多其他有用的特性，比如可以 mock 一个 npm 组件的实现，调整 setTimeout 时钟等，真正进行[url=]单元测试[/url]时，这些工具也是必不可少的，整个单元测试[url=]技术[/url]体系包含了很多东西，本文无法面面俱到，只介绍了一些距离我们最近的相关的技术体系。