react前端自动化测试： jest + enzyme

1.背景

本文中的自动化测试指的是单元测试（UT），所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试，主要是用来验证所测代码是否和程序员的期望一致。

jest 是 facebook 开源的，用来进行单元测试的框架，功能比较全面，测试、断言、覆盖率它都可以，另外还提供了快照功能。

2.安装与配置

2.1安装

安装jest

npm install --save-dev jest

安装babel-jest

npm install --save-dev babel-jest

安装enzyme，需要根据项目的react版本来安装对应的enzyme

npm install --save-dev enzyme enzyme-adapter-react-16

安装react-test-renderer

npm install --save-dev react-test-renderer

2.2配置

package.json中添加：

{
  "scripts": {
    "test": "jest"
  }
}

执行npm run test 命令可在终端运行查看测试运行结果。

同时 Jest 还提供了生成测试覆盖率报告的命令，只需要添加上 --coverage 这个参数既可生成，再加上--colors可根据覆盖率生成不同颜色的报告（<50%红色，50%~80%黄色， ≥80%绿色）

"test": "jest --colors --coverage",

.babelrc文件中添加，请根据自己的项目情况调整

{
"env": {
    "test": {
      "presets": [["next/babel", { "preset-env": { "modules": "commonjs" }, "styled-jsx": {
        "plugins": [
          "styled-jsx-plugin-postcss"
        ]
      } }]]
    }
  }
}

jest.config.js: jest配置文件，可放在根目录下或config文件下（也可以起其他名字或者直接写在package.json里）

module.exports = {
  setupFiles: ['<rootDir>/jest.setup.js'], // 运行测试前可执行的脚本（比如注册enzyme的兼容）
  transform: {
    '^.+\\.(js|jsx|mjs)$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.css$': '<rootDir>/__test__/css-transform.js',
  },
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'], //转换时需忽略的文件
  testURL: 'http://localhost/', // 运行环境下的URl
};

还有一些配置，详细的配置见jest官网

  collectCoverage: true, // 是否收集测试时的覆盖率信息（默认是false,同package配置的--coverage参数）
  collectCoverageFrom: ['<rootDir>/src/**/*.{js,jsx,mjs}'], // 哪些文件需要收集覆盖率信息
  coverageDirectory: '<rootDir>/test/coverage', // 输出覆盖信息文件的目录
  coveragePathIgnorePatterns: ['/node_modules/', '<rootDir>/src/index.jsx'], // 统计覆盖信息时需要忽略的文件
  moduleNameMapper: { // 需要mock处理掉的文件，比如样式文件 },
  testMatch: [ // 匹配的测试文件
    '<rootDir>/test/**/?(*.)(spec|test).{js,jsx,mjs}',
    '<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}',
  ],

jest.setup.js

/* eslint-disable import/no-extraneous-dependencies */
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

3.测试

通常测试文件名与要测试的文件名相同，后缀为.test.js，所有测试文件默认放在__test__文件夹中。

describe块之中，提供测试用例的四个函数：before()、after()、beforeEach()和afterEach()。它们会在指定时间执行(如果不需要可以不写)

describe('加法函数测试', () => {

  before(() => {// 在本区块的所有测试用例之前执行
  });

  after(() => {// 在本区块的所有测试用例之后执行
  });

  beforeEach(() => {// 在本区块的每个测试用例之前执行
  });

  afterEach(() => {// 在本区块的每个测试用例之后执行
  });


  it('1加1应该等于2', () => {
     expect(add(1, 1)).toBe(2);
  });
  it('2加2应该等于4', () => {
      expect(add(2, 2)).toBe(42);
  });

});

测试文件中应包括一个或多个describe, 每个describe中可以有一个或多个it,每个describe中可以有一个或多个expect.

describe称为"测试套件"（test suite），it块称为"测试用例"（test case）。

expect就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误.

3.1简单测试

import React from 'react';

export default () => (
  <div>404</div>
);

/* eslint-env jest */
import { shallow } from 'enzyme';
import React from 'react';
import Page404 from '../components/Page404';

describe('Page404', () => {
  it('Page404 shows "404"', () => {
    const app = shallow(<Page404 />);
    expect(app.find('div').text()).toEqual('404');
  });
});

这个测试只测试了组件是否被正常显示出来了。expect部分是断言，实现内容是在被渲染出的Page404组件中找到div标签，然后断言它的text()中有没有包含期望的文字。通过这种方式我们可以得知组件是否有被显示出来。

除了text()属性以外，还可非常灵活的通过其他方式来得知组件是否被正常显示。例如：

expect(wrapper.find('.card').exists()).toBeTruthy()
expect(wrapper.find('input').props().type).toBe('text')

npm test运行所有测试文件或 npm test <name> 运行匹配的测试文件：

% Stmts是语句覆盖率（statement coverage）：是否每个语句都执行了
% Branch分支覆盖率（branch coverage）：是否每个分支代码块都执行了（if, ||, ? : ）
% Funcs函数覆盖率（function coverage）：是否每个函数都调用了
% Lines行覆盖率（line coverage）：是否每一行都执行了

在这里简单介绍下enzyme

enzyme是Airbnb开源的react测试类库，提供了一套简洁强大的API，并通过jquery风格的方式进行dom处理，开发体验十分友好. 它提供三种测试方法

shallow:

shallow 返回组件的浅渲染，对官方shallow rendering 进行封装。浅渲染作用就是：它仅仅会渲染至虚拟dom，不会返回真实的dom节点，这个对测试性能有极大的提升。shallow只渲染当前组件，只能能对当前组件做断言

mount :

mount 方法用于将React组件加载为真实DOM节点。mount会渲染当前组件以及所有子组件

render:

render 采用的是第三方库Cheerio的渲染，渲染结果是普通的html结构，对于snapshot使用render比较合适。

多数情况下，shallow 方法就能满足我们的需求了。

Enzyme的一部分API，你可以从中了解它的大概用法。详细的API

.get(index)：返回指定位置的子组件的DOM节点

.at(index)：返回指定位置的子组件

.first()：返回第一个子组件

.last()：返回最后一个子组件

.type()：返回当前组件的类型

.text()：返回当前组件的文本内容

.html()：返回当前组件的HTML代码形式

.props()：返回根组件的所有属性

.prop(key)：返回根组件的指定属性

.state([key])：返回根组件的状态

.setState(nextState)：设置根组件的状态

.setProps(nextProps)：设置根组件的属性

例如：

expect(wrapper.find('input').prop('value')).toBe('default value')；

3.2 模拟 Props，渲染组件创建 Wrapper

/* eslint-env jest */
import { shallow } from 'enzyme';
import React from 'react';
import { OrderManage } from '../../components/purchaser/OrderManege';

const setup = ({ ...props }) => {
  const wrapper = shallow(<OrderManage {...props} />);
  return {
    props,
    wrapper,
  };
};

describe('OrderManage', () => {
  it('role is operator', () => {
    const { wrapper } = setup({
      role: 'operator',
      isFetching: true,
      fetchOrdersByStatuses: () => {}, // 直接设为空函数
　　　 getData: jest.fn(), // Jest 提供的mock 函数
    });
    const params = {
      node: {
        id: 2,
      },
    };
    expect(wrapper.instance().handlePageChange(1));
    expect(wrapper.instance().OrderManagementLink(params));
    expect(wrapper.find('.loader')).toHaveLength(1);
    expect(wrapper.find('.order-simpleGrid')).toHaveLength(0);
    expect(wrapper.type()).toEqual('div');
  });
});

在正式测试功能之前，我们要写一个 setup方法用来渲染组件，因为每一个测试case都会用到它

3.3 组件中的方法测试

export class Card extends React.Component {
  constructor (props) {
    super(props)

    this.cardType = 'initCard'
  }

  changeCardType (cardType) {
    this.cardType = cardType
  }
  ...
}

it('changeCardType', () => {
  let component = shallow(<Card />)
  expect(component.instance().cardType).toBe('initCard')
  component.instance().changeCardType('testCard')
  expect(component.instance().cardType).toBe('testCard')
})

其中，instance 方法可以用于获取组件的内部成员对象。

3.4 模拟事件测试

 <Input value={value} onChange={e => this.handleChange(e)}/>

it('can save value and cancel', () => {
   const value = 'edit'
   const {wrapper, props} = setup({
      editable: true
   });
   wrapper.find('input').simulate('change', {target: {value}});
   wrapper.setProps({status: 'save'});
   expect(props.onChange).toBeCalledWith(value);
})

我们可以在这个返回的 dom 对象上调用类似 jquery 的api进行一些查找操作，还可以调用 setProps 和 setState 来设置 props 和 state，也可以用 simulate 来模拟事件,

触发事件后，去判断props上特定函数是否被调用，传参是否正确；组件状态是否发生预料之中的修改；某个dom节点是否存在是否符合期望。

例：

wrapper.find('button').simulate('click')；

wrapper.find('input').simulate('keyup')；

expect(props.onClick).toBeCalled()；// onClick方法被调用

expect(props.onClick).not.toBeCalled() // onClick方法没被调用

3.5 对生命周期的测试

对于

componentWillMount
componentWillUpdate
componentWillReceiveProps
shouldComponentUpdate
componentWillUnmount

可以使用 Enzyme 中的 shallow 方法加载组件，例如

/* eslint-env jest */

import { shallow } from 'enzyme';

　import sinon from 'sinon';

　import { App } from '../App';



it('componentWillMount', () => {
    sinon.spy(App.prototype, 'componentWillMount');
    shallow(<App />);
    expect(App.prototype.componentWillMount.calledOnce).toBeTruthy();
  });

it('componentWillReceiveProps', () => {
  let wrapper = shallow(<App role={''} />);
  sinon.spy(App.prototype, 'componentWillReceiveProps')
  wrapper.setProps({
    role: 'admin'
  });
 expect(App.prototype.componentWillReceiveProps.calledOnce).toBeTruthy();
})

其中，spy 是 sinon 提供的特殊函数，它可以获取关于函数调用的信息。例如，调用函数的次数、每次调用的参数、返回的值、抛出的错误等，可以用来测试一个函数是否被正确地调用。npm i --dave-dev sinon 安装sinon.

而对于

componentDidMount
componentDidUpdate

要用enzyme的mount方法进行加载。

3.6 使用snapshot进行UI测试

import renderer from 'react-test-renderer'

it('App -- snapshot', () => {
   const renderedValue = renderer.create(<App />).toJSON()
   expect(renderedValue).toMatchSnapshot()
})

jest的特色，快照测试第一次运行的时候会将 React 组件在不同情况下的渲染结果（挂载前）保存一份快照文件。后面每次再运行快照测试时，都会和第一次的比较，diff出两次快照的变化。

如果需要更新快照文件，使用 npm run test -- -u 命令

3.7 Redux测试

redux官网有详细的例子，送上传送门。

4.总结

上面主要介绍了UT的安装配置及几个测试demo，以前没有接触过单元测试，各种踩坑与啃读API（jest + enzyme），这些demo基本可以满足项目中的测试，后续在写测试中再进步。刚开始接触测试是一点思路也没有，看见组件后无从下手，也一直在思考花费这么多时间写测试到底值不值得，下面是目前遇到的问题和一些思考中的问题，可以一起讨论一下：

一个好测试的标准，覆盖率越高就一定越好吗
开发前还是开发后测试
怎么测纯函数的组件（函数中的const之后总是执行不到）
error: TypeError: Only absolute URLs are supported 未解决

posted @ 2018-08-30 18:09 簌大侠阅读(15979) 评论(0) 编辑收藏举报

刷新页面返回顶部

簌簌寻寻