jest + react + enzyme的单元测试

enzyme提供了三种渲染方式,rendermountshallow,分别存在以下区别:

  • render采用的是第三方库Cheerio的渲染,渲染结果是普通的html结构,对于snapshot使用render比较合适。
  • shallowmount对组件的渲染结果不是html的dom树,而是react树,如果你chrome装了react devtool插件,他的渲染结果就是react devtool tab下查看的组件结构,而render函数的结果是element tab下查看的结果。
  • shallowmount的结果是个被封装的ReactWrapper,可以进行多种操作,譬如find()、parents()、children()等选择器进行元素查找;state()props()进行数据查找,setState()、setprops()操作数据;simulate()模拟事件触发。
  • shallow只渲染当前组件,只能能对当前组件做断言;mount会渲染当前组件以及所有子组件,对所有子组件也可以做上述操作。一般交互测试都会关心到子组件,我使用的都是mount。但是mount耗时更长,内存啥的也都占用的更多,如果没必要操作和断言子组件,可以使用shallow。

enzyme还提供了simulate()接口模拟事件,实际上simulate是通过触发事件绑定函数,来模拟事件的触发。触发事件后,去判断props上特定函数是否被调用,传参是否正确;组件状态是否发生预料之中的修改;某个dom节点是否存在是否符合期望。

 

简单例子:

import React from 'react';
import { shallow } from 'enzyme';
import FlightShowOrder from '@/scene/air/flight/flightShowOrder/index';

const setup = (props) => shallow(<FlightShowOrder {...props}/>);
describe('测试描述', () => {
  it('渲染测试描述', () => {
    //实例
    let app = setup({});
    //判断是否有sort-controls 这个元素 即length是否为1
    expect(app.find('.sort-controls').length).toBe(1);
  });
});

 

 

PS:还有待深入了解单元测试相关技术

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值