网易云团队前端单元测试技术方案总结(四)

发表于:2021-8-02 09:18  作者:江水   来源:掘金

字体: | 上一篇 | 下一篇 |我要投稿 | 推荐标签: 测试技术 单元测试

  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 时钟等,真正进行单元测试时,这些工具也是必不可少的,整个单元测试技术体系包含了很多东西,本文无法面面俱到,只介绍了一些距离我们最近的相关的技术体系。

     本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理

评 论

论坛新帖



建议使用IE 6.0以上浏览器,800×600以上分辨率,法律顾问:上海信义律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022, 沪ICP备05003035号
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪公网安备 31010102002173号

51Testing官方微信

51Testing官方微博

扫一扫 测试知识全知道