antd-pro1.0使用jest对react组件进行单元测试

前言

基于React+Ant Design（如下用Antd表示）的项目，在对于本身封装的，或者基于Antd封装的公共组件的自动化测试技术的选型和实践。

背景

随着前端项目愈来愈大，业务逻辑日益繁杂，协同开发的同事也愈来愈多，迭代频繁，许多页面有一些类似的功能，会复用一些组件，这些组件被剥离出来，通常放在component文件夹下，你们共同维护，这时会出现一些常见问题：

• 从代码层面看，咱们必须保证当前组件的质量，即当前业务的正常使用
• 在新需求下，旧组件若是能知足新需求50%以上的功能，应当升级旧组件知足新需求，同时兼容旧业务
• 除该组件Owner以外第二人，在修改组件的过程当中，避免由于对代码的不熟悉，改出BUG
• 一个组件多个页面复用，修改后的测试回归任务重

单元测试的好处

• 测试用例代码跟项目代码彻底分离，可是能检验当前组件的质量、健壮性，保证业务可以正常使用
• 下降项目多处使用的公共组件修改后，测试回归任务重(改一处测多处)的问题
• 减小没必要要的console.log或者debug，提高维护体验
• 对开发人员来讲，写测试用例能够适量提高对代码实现的理解

铭记：测试不是最终目的，尽量在开发阶段有意识地提升代码质量、规避问题。

React项目单元测试框架Jest

• 源自Facebook，Jest的一个理念是提供一套完整集成的零配置测试体验，开箱即用。
  
• 包含单元测试运行器、断言库、Mock库
  
• 内置代码覆盖率报告
  
• 能够与TypeScript一同使用

jest针对为实现某些业务逻辑而封装的函数，设定多种可能的输入，判断是否准确地返回了指望值

当前管理平台的简单示例

1.测试对象：

侧边菜单栏组件(./src/componets/SiderMenu.js)中使用到的数据和逻辑处理函数输入输出表现

2.测试前分析：

业务角度分析：这是一个按权限展现的多级侧边主菜单栏。(权限方面须要测试及后端人员进行)
组件实现分析：根据后端提供的数据作菜单展现，若是存在多级数据就多级展现，同时可基于菜单实现路由映射。(jest单元测试)

3.肯定测试对象用到的数据和逻辑处理函数

如下两个文件中包含并导出了咱们的测试对象组件SiderMenu使用到的函数
**js文件1：./src/componets/_utils/pathTools.js**

// /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
export function urlToList(url) {
  const urllist = url.split('/').filter(i => i);
  return urllist.map((urlItem, index) => {
    return `/${urllist.slice(0, index + 1).join('/')}`;
  });
}

js文件2:./src/componets/SiderMenu.js

......
......
/**
 * 递归扁平化数据
 * [{path:string},{path:string}] => [path,path2]
 * @param  menu
 */
export const getFlatMenuKeys = menu =>
  menu.reduce((keys, item) => {
    keys.push(item.path);
    if (item.children) {
      return keys.concat(getFlatMenuKeys(item.children));
    }
    return keys;
  }, []);

/**
 * 根据paths查找全部匹配的菜单的keys
 * @param  flatMenuKeys: [/abc, /abc/:id, /abc/:id/info]
 * @param  paths: [/abc, /abc/11, /abc/11/info]
 */
export const getMenuMatchKeys = (flatMenuKeys, paths) =>
  paths.reduce(
    (matchKeys, path) =>
      matchKeys.concat(flatMenuKeys.filter(item => pathToRegexp(item).test(path))),
    []
  );
......
......

4.编写测试用例

在测试组件目录下添加.test.js文件，运行jest将会自动识别并执行.test.js结尾的文件进行测试。

jest提供的定义测试的一些方法：

• describe: 定义一个测试套件（test suite）
• it: 定义一个测试（test）
• beforeEach: 定义一个回调函数在每一个测试以前执行
• expect: 执行一个断言
• jest.fn(): 创造一个mock函数
  ..................

测试用例：SlideMenu.test.js

// 导入待测试的三个函数
import { urlToList } from '../_utils/pathTools';
import { getFlatMenuKeys, getMenuMatchKeys } from './SiderMenu';

// 先mock一个测试的菜单栏数据做为参数
const menu = [
  {
    path: '/dashboard',
    children: [
      {
        path: '/dashboard/name',
      },
    ],
  },
  {
    path: '/userinfo',
    children: [
      {
        path: '/userinfo/:id',
        children: [
          {
            path: '/userinfo/:id/info',
          },
        ],
      },
    ],
  },
];

// 传入mock的数据给getFlatMenuKeys获得的输出为flatMenuKeys
const flatMenuKeys = getFlatMenuKeys(menu);

// 测试getFlatMenuKeys返回的结果是否符合咱们的预期
describe('test convert nested menu to flat menu', () => {
  it('simple menu', () => {
    expect(flatMenuKeys).toEqual([
      '/dashboard',
      '/dashboard/name',
      '/userinfo',
      '/userinfo/:id',
      '/userinfo/:id/info',
    ]);
  });
});

// 测试菜单匹配 模拟多种可能的输入是否符合指望（多种输入对应的输出是否符合预期）
describe('test menu match', () => {
  // 简单的一级菜单应该返回对应的一个一级菜单结果
  it('simple path', () => {
    expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboard'))).toEqual(['/dashboard']);
  });
  // 错误或不存在的路径应该返回[]
  it('error path', () => {
    expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboardname'))).toEqual([]);
  });
  // 二级菜单应该返回对应的全部菜单keys
  it('Secondary path', () => {
    expect(getMenuMatchKeys(flatMenuKeys, urlToList('/dashboard/name'))).toEqual([
      '/dashboard',
      '/dashboard/name',
    ]);
  });
  // 存在参数的路径应该返回对应的预期
  it('Parameter path', () => {
    expect(getMenuMatchKeys(flatMenuKeys, urlToList('/userinfo/2144'))).toEqual([
      '/userinfo',
      '/userinfo/:id',
    ]);
  });
  // 三级带参数路径
  it('three parameter path', () => {
    expect(getMenuMatchKeys(flatMenuKeys, urlToList('/userinfo/2144/info'))).toEqual([
      '/userinfo',
      '/userinfo/:id',
      '/userinfo/:id/info',
    ]);
  });
});

5.测试操做：

// 由于当前项目是基于roadhog、roadhog将Jest已经隐藏
yarn roadhog test ./src/componets/SiderMenu
// 若是是普通react项目使用jest须要安装
yarn jest test ./src/componets/SiderMenu

更多功能待完善....