对于基础类库来说,保证其质量和稳定性是最重要的。开源工具的架构设计中,lodash、vue、react、ant-design,无一例外其中都包含了大量的前端自动化测试内容,用来保证类库的稳定性。

再从研发的整个过程来看测试集成,**测试环节是保证持续集成和交付的关键。**

借用经典的软件开发测试模型--V-Model模型来说明,对测试集成的分类可以分为单元测试、集成测试、冒烟测试、验收测试4个环节。通过CI/CD流水线,其中的一些测试方式可以集成到其中。

单元测试(Unit Test),属于对编码实现细节的测试,把模块、组件或者函数作为一个单元编写测试用例,来对功能做验证。单测的用例代码和模块的源码放在一起,随着模块的编译构建一起执行。

前端开发中经常见到的 jest、mocha都属于单元测试库。

集成测试(Integration Test),属于泛指系统的功能性测试,确保了系统的所有单元可以按照预期的功能运行。把相关的组件、模块集成在 Web页面中进行统一测试,通常和端到端的一起进行。一般在模块编译构建结束后执行。集成测试关注的是产品的单独一块功能,端到端测试关注的是产品功能之前的使用链路和数据流向。

集成测试也可以用单测库进行。前端常用的端到端类库有PhantomJS,casperJs,puppeteer。

系统测试(System Test),属于对业务系统兼容性、性能、回归、可伸缩性、安全性等方面(web应用中可能还包括网络服务、IO、物理机CPU占用、内存消耗等等)的测试。通常需要配合使用一些GUI工具进行测试,一般在做系统功能测试时同步进行。

验收测试(Acceptance Test),指从一个从用户的角度出发执行的测试,因此称为验收测试。这种测试在将软件交付给客户(即生产环境)之前执行。

上面已经介绍了单元测试的定义,关于单元测试有几个概念需要了解下。**测试用例**是组成单元测试模块的最小结构,也就是说把测试用例放到一个测试模块里,就是一个完整的单元测试。**断言**是测试用例中最核心的部分,比如nodejs中的 assert 模块,如果当前程序的某种状态符合 assert 的期望此程序才能正常执行,否则直接退出应用。

断言是单元测试框架中核心的部分,断言失败会导致测试不通过,或报告错误信息。

对于常见的断言,举一些例子如下:

- 同等性断言 Equality Asserts

- expect(sth).toEqual(value)

- expect(sth).not.toEqual(value)

- 比较性断言 Comparison Asserts

- expect(sth).toBeGreaterThan(number)

- expect(sth).toBeLessThanOrEqual(number)

- 类型性断言 Type Asserts

- expect(sth).toBeInstanceOf(Class)

- 条件性测试 Condition Test

- expect(sth).toBeTruthy()

- expect(sth).toBeFalsy()

- expect(sth).toBeDefined()

用一个函数来说明:

function multiple(a, b) {

let result = 0;

for (let i = 0; i < b; ++i)

result += a;

return result;

}

const assert = require('assert');

assert.equal(multiple(1, 2), 2);

但是nodejs 自带的 assert 模块只能满足一些简单场景的需要,而且提供的错误信息提示不太友好,其次输出的内容是程序的错误报告,而不是一个单元测试报告,所以在做单元测时需要专业的断言库提供测试报告,这样才能看到有哪些断言通过没通过。

断言库主要提供上述断言的语义化方法,用于对参与测试的值做各种各样的判断。这些语义化方法会返回测试的结果,要么成功、要么失败。常见的断言库有 Should.js, Chai.js 等。

首先要明确一点,所有的单元测试要在不同的环境下执行就要打不同环境对应的包,所以在搭建测试工具链时要确定自己运行在什么环境中,如果在 Node 中只需要加一层 babel 转换,如果是在真实浏览器中,则需要增加 webpack 处理步骤。

mocha 是一个经典的测试框架,它提供了一个单元测试的骨架,可以将不同子功能分成多个文件进行测试,最后生成一份结构型的测试报告。karma是一个测试执行过程管理工具,可以watch文件更新。

Node 环境下测试 : mocha + chai + babel

浏览器环境测试 : karma + mocha + chai + webpack + babel + jsdom

但是mocha配置起来比较繁琐,还有一些额外的工具例如单元覆盖率(istanbul),函数模拟 (sinon.js)等辅助工具,选型的成本比较高。

jasmine 也是一个常用的测试框架,里面包含了 测试流程框架,断言函数,mock工具等测试中会遇到的工具。可以近似地看作 jasmine = mocha + chai + 辅助工具。

Node 环境下测试 : Jasmine + babel

浏览器环境测试 : karma + Jasmine + webpack + babel + jsdom

Jest 是 facebook 出的一个完整的单元测试技术方案,集 测试框架, 断言库, 启动器, 快照,沙箱,mock工具于一身,也是 React 官方使用的测试工具。Jest的优势是明显的:

速度快,具备监控模式,API 简单,易配置,隔离性好,Mock 丰富,多项目并行。

Node 环境下测试 : Jest + babel

浏览器环境测试 : Jest + babel + JSDOM(组件需要 [react-testing-library](https://github.com/kentcdodds/react-testing-library), [Enzyme](http://airbnb.io/enzyme/), [TestUtils](https://reactjs.org/docs/test-utils.html) 三选一) + webpack

项目里安装 Jest 、babel

npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-typescript @types/jest

在根目录下生成 jest.config.js 的配置文件,scripts里添加的jest命令会在 jest.config.js 里找配置。

jest --init

配置 jest

module.exports = {

verbose: true,

roots: ['<rootDir>/packages'], // 文件入口

moduleNameMapper: {

'\\.(css|less|scss)$': 'identity-obj-proxy' // 使用 identity-obj-proxy mock CSS Modules

},

testRegex: '(/test/.*|\\.(test|spec))\\.(ts|tsx|js)$', // 匹配测试文件

moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],

testPathIgnorePatterns: ['<rootDir>/node_modules/', '/node_modules/', '/lib/', '/demo/', '/dist/'],

preset: 'ts-jest',

testEnvironment: 'jsdom',

transform: {

'\\.[jt]sx?$': 'babel-jest', // 文件处理

'^.+\\.svg$': 'jest-svg-transformer', // svg转换

'^.+\\.(ts|tsx)$': 'ts-jest'

},

setupFiles: ['jest-canvas-mock'],

transformIgnorePatterns: ['<rootDir>/node_modules/(?!lodash-es)'], // transform编译忽略哪些文件

collectCoverage: true, // 开启收集Coverage(测试覆盖范围)

coverageDirectory: '<rootDir>/coverage/', // 指定生成的coverage目录

coveragePathIgnorePatterns: ['<rootDir>/coverage/'] //该路径下的测试,忽略测试覆盖率

}

babel配置:

{

presets: [

'@babel/preset-react',

[

'@babel/preset-env', {targets: {node: 'current'}}

],

'@babel/preset-typescript'

],

plugins: [

[

'import',

{ libraryName: 'antd', libraryDirectory: 'es', style: true }

],

['@babel/plugin-transform-runtime'],

['@babel/plugin-transform-modules-commonjs'] // jest不支持es模块,用babel处理

]

}

断言api。查看jest支持的所有断言api:https://www.jestjs.cn/docs/expect

test('two plus two is four', () => {

// toBe 匹配器

expect(2 + 2).toBe(4);

});

test('object assignment', () => {

const data = {one: 1};

data['two'] = 2;

// toEqual 匹配器

expect(data).toEqual({one: 1, two: 2});

});

测试异步代码的执行结果

test('the data is peanut butter', () => {

return fetchData().then(data => {

expect(data).toBe('peanut butter');

});

});

test('the data is peanut butter', async () => {

await expect(fetchData()).resolves.toBe('peanut butter');

});

test('the fetch fails with an error', () => {

// expect至少执行一次,如果不加则不会执行 catch

expect.assertions(1);

return fetchData().catch(e => expect(e).toMatch('error'));

});

在测试运行前后进行一些设置,例如初始化测试代码等,保证每个测试的输入都是一致的。

export default class Counter {

constructor (){

this.number = 0;

}

addOne(){

this.number += 1

}

minusOne() {

this.number -= 1

}

}

test('加一', function() {

counter.addOne();

expert(counter.number).toBe(1)

})

test('减一', function() {

counter.minusOne();

expert(counter.number).toBe(0)

})

let counter = null;

beforeEach(() => {

counter = new Counter();

})

test('加一', function() {

counter.addOne();

expert(counter.number).toBe(1)

})

test('减一', function() {

counter.minusOne();

expert(counter.number).toBe(-1)

})

函数执行mock。对函数是否被调用,调用结果是否正常做验证。

const mockCallback = jest.fn(x => 42 + x);

forEach([0, 1], mockCallback);

expect(mockCallback.mock.calls.length).toBe(2);

expect(mockCallback.mock.calls[0][0]).toBe(0);

expect(mockCallback.mock.calls[1][0]).toBe(1);

expect(mockCallback.mock.results[0].value).toBe(42);

用来测试配置文件或组件每次渲染是否一致。例如测试输入 schema form 配置功能,获取到输出的 data 快照是否一致。如果不一致,说明本次代码修改导致 data 的输出发生变化。

it('校验配置项是否正确', () => {

const user = {

createdAt: new Date(),

id: Math.floor(Math.random() * 20),

name: 'LeBron James',

};

expect(user).toMatchSnapshot({

createdAt: expect.any(Date),

id: expect.any(Number),

});

});

exports[`will check the matchers and pass 1`] = `

`;

初次运行,生成 .snap 文件。第二次运行会校验快照是否一致。

jest 测试dom操作,内置类似jsdom的能力。

const $ = require('jquery');

const fetchCurrentUser = require('./fetchCurrentUser.js');

$('#button').click(() => {

fetchCurrentUser(user => {

const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');

$('#username').text(user.fullName + ' - ' + loggedText);

});

});

jest.mock('../fetchCurrentUser');

test('验证用户登录', () => {

// 初始化dom

document.body.innerHTML =

'<div>' +

' <span id="username" />' +

' <button id="button" />' +

'</div>';

require('../displayUser');

const $ = require('jquery');

const fetchCurrentUser = require('../fetchCurrentUser');

// mock 函数返回

fetchCurrentUser.mockImplementation(cb => {

cb({

fullName: 'Johnny Cash',

loggedIn: true,

});

});

// 执行按钮点击事件

$('#button').click();

expect(fetchCurrentUser).toBeCalled();

expect($('#username').text()).toEqual('Johnny Cash - Logged In');

});