jest实现项目的单元测试

以vue框架为例（其他框架雷同），jest安装过程不再赘述，教程一搜一大把，本文介绍case编写过程中的粗略心得。

1、运行

npm run test //运行jest.config.js中声明的所有匹配文件
npm run test filename //运行指定文件filename

2、case编写

添加组件：
可以在jest.config.js文件中添加需要进行单元测试的组件路径。
用法示例：

describe('说明', () => {
     
	//options表示当前测试中数据，包含props,data,mock等
	const wrapper=shallowMount(componentName, options);
	
	it('说明', () => {
     
		expect(received).toBe(expected);
	});
	
	it('', () => {
     
		//页面元素渲染判定
		expect(wrapper.classes('className')).toBe(true);
		expect(wrapper.contains('.className')).toBe(true);
	});

  	it('', () => {
     
		//点击事件判
		wrapper.find('.className').trigger('click');
		expect(received).toBe(expected);
	});
	
	...等等
});

复杂一些的，如接口测试：
首先使用mock模拟接口
import { requestName } from ‘url_url’;
jest.mock(‘url_url’);
在文件中定义接口请求成功与失败的方法，并在测试组件中使用定义的方法。
ps：
如在util.js中重定义接口请求成功方法serviceResolve和接口请求失败方法serviceReject如下，

export const serviceResolve = data => {
     
	return Promise.resolve({
     
		...data,
		resultCode: data.retCode,
		resultString: data.retString
	});
};
export const serviceReject = data => {
     
	return Promise.reject({
     
		type: 'server',
		data: {
     
			...data,
			resultCode: data.retCode,
			resultString: data.retString
		}
	});
}

具体使用如下：

it('request success', () => {
     
	let mockSuccessService = {
     
		...mockService,
		ret: 0
	};
	const requestSuccessMock = serviceResolve(mockSuccessService);
	requestService.mockResolvedValue(requestSuccessMock);
	requestService().then(() => {
     
		expect(received).toEqual(expected);
	});
});

it('request fail', done => {
     
	let mockFailService = {
     
		...mockService,
		# 定义的请求错误码
		ret: '500'
	};
	const requestFailMock = serviceResject(mockFailService);
	requestService.mockRejestValue(requestFailMock);
	setTimeout(() => {
     
		expect(received).toEqual(expected);
		done();
	});
	# 或者使用另一方法
	requestService().catch(() => {
     
		expect(received).toEqual(expected);
	});
});

3、查看

打开coverage/lcov-report/index.html文件即可查看当前单测的覆盖率报告。

报告中的指标和意义：

%stmts表示语句覆盖率，是否每条语句都执行；
%branch表示分支覆盖率，是否每个if模块都执行；
%funcs表示函数覆盖率，是否每个函数都调用；
%lines表示行覆盖率，是否每一行都执行；

文件中，每一行前面的1x，2x表示这一行代码执行的次数；黑色方块、黄色标示代码表示branch没有测试到；红色标示代码表示stmts没有测试到。