Unit testing of the JEST implementation

Take VUE framework as an example (other frameworks are the same), JEST installation process is no longer described, tutorial one search a lot, this article introduces the rough experience in the process of writing case.

1, run,

NPM run test NPM run test filename // Run the specified file filename

2. Case writing

Add a component: You can add the component path that you want to unit test in the jest.config.js file. Usage Examples:

describe('that', () => {//options represents the data in the current test, including props,data,mock, etc const wrapper=shallowMount(componentName, options); it('that', () => {
		expect(received).toBe(expected);
	});
	
	it(' ', () => {// page element render judgment expect(wrapper.classes()'className')).toBe(true);
		expect(wrapper.contains('.className')).toBe(true);
	});

  	it(' ', () => {// Click event wrapper. Find ()'.className').trigger('click'); expect(received).toBe(expected); }); . Etc});Copy the code

Import {requestName} from ‘url_URL ‘; import {requestName} from’ url_URL ‘; jest.mock(‘url_url’); Define the methods for interface request success and failure in a file and use the defined methods in the test component. Ps: Redefining the interface request success method serviceResolve and interface request failure method serviceReject in util.js as follows:

export const serviceResolve = data => {
	returnPromise.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 } }); }Copy the code

Specific use is as follows:

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

it('request fail'.done= > {letmockFailService = { ... mockService,# request error code defined
		ret: '500'
	};
	const requestFailMock = serviceResject(mockFailService);
	requestService.mockRejestValue(requestFailMock);
	setTimeout(() => {
		expect(received).toEqual(expected);
		done(a); });# Or use another method
	requestService().catch(() => {
		expect(received).toEqual(expected);
	});
});
Copy the code

3, check the

Open the coverage/lcov-report/index.html file to view the coverage report for the current single test. Indicators and Significance of the report:

% STMTS indicates statement coverage, whether every statement is executed; %branch indicates branch coverage, whether each if module is executed; %funcs indicates function coverage, whether every function is called; %lines indicates line coverage, whether each line is executed;

In the file, 1x and 2x before each line represent the number of times that line of code is executed; The black box and yellow code indicate that branch is not tested. The code in red indicates that STMTS is not tested.