网易云团队前端单元测试技术方案总结（四）
Shallow 渲染因为 shallow 模式仅能感知到第一层自定义子组件组件，往往只能用于简单组件测试。例如下面的组件：
// 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 的内部结构无法感知。
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 往往只适合一种理想的场景，一些依赖浏览器行为表现的操作 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组件节点结构。
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 时钟等，真正进行单元测试时，这些工具也是必不可少的，整个单元测试技术体系包含了很多东西，本文无法面面俱到，只介绍了一些距离我们最近的相关的技术体系。
页:
[1]
