前端代码接入单元测试

一、单元测试发展

1、为什么要有单元测试

软件测试是一种实际输出与预期输出之间的审核或者比较过程

测试可以尽早发现BUG

测试可以提高代码质量

测试可以让我们自信地重构

2、手动的测试代码(或者叫肉眼测试)

function add(a, b) { return a + b; } console.assert(add(4, 2) == 7, '测试add函数');

3、测试框架与手工断言的对比

二、Jest框架的使用

1、Jest由Facebook出品,非常适合React测试、零配置、内置代码覆盖率、强大的Mocks

2、官网地址

3、在项目中使用

npm install jest -D

4、在文件的旁边创建一个xx.test.js的文件

// match.js文件 function add(a, b) { return a + b; } function minus(a, b) { return a - b; } module.exports = { add, minus, };

// math.test.js文件 let { add, minus } = require('./match'); describe('测试add', function () { test('测试1+1', function () { expect(add(1, 1)).toBe(2); }); test('测试2+2', function () { expect(add(2, 2)).toBe(4); }); }); describe('测试minus', function () { test('测试1-1', function () { expect(minus(1, 1)).toBe(0); }); test('测试2-2', function () { expect(minus(2, 2)).toBe(0); }); });

5、在package.json中配置jest测试命令

"scripts": { "test1":"jest", "test": "jest --watchAll" // 可以监控代码改变自动运行测试 },

6、使用jest生成测试报告

代码覆盖率是软件测试中的一种度量,描述程序中源代码被测试的比例和程度,所得比例称为代码覆盖率

"scripts": { "test1": "jest", "test": "jest --watchAll", + "coverage": "jest --coverage" },

运行命令会在项目下生成一个Icov-report/index.html的文件，运行这个文件

控制面板上会有对应的信息输出

7、常见的匹配器

https://jestjs.io/zh-Hans/docs/using-matchers

8、全部的匹配器

https://jestjs.io/zh-Hans/docs/expect

三、使用babel和typescript来做单元测试

1、安装依赖包，参考文档https://jestjs.io/zh-Hans/docs/getting-started#%E4%BD%BF%E7%94%A8-babel

yarn add jest ts-node babel-jest @types/jest @babel/core @babel/preset-env @babel/preset-typescript typescript -D

2、生成tscconfig.json文件

{ "compilerOptions": { "target": "es5", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "baseUrl": "src" }, "exclude": ["node_modules"], "include": ["./src/**/*.ts", "__tests__/**/*.ts"] }

3、根目录下创建一个babel.config.js的文件

module.exports = { presets: [ [ '@babel/preset-env', { targets: { node: 'current', }, }, ], '@babel/preset-typescript', ], };

4、初始化jest文件

npx jest --init

// jest.config.ts文件内容 export default { // 用来检测测试文件的glob模式, // 单元测试文件可以是在__tests__文件夹下以js、ts、jsx、tsx结尾的文件，也可以是spec.ts和test.ts结尾的文件 testMatch: [ '**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)', ], // 在每一次测试时自动清除mock调用和实例 clearMocks: true, collectCoverage: true, // 输出代码覆盖率的目录 coverageDirectory: 'coverage', // 使用的模块的文件扩展名数组 moduleFileExtensions: ['js', 'json', 'jsx', 'ts', 'tsx', 'node'], // 用来跑测试的测试环境,可以选择jsdom或node testEnvironment: 'jsdom', };

5、在src目录下创建match.ts和match.spec.ts文件

// match.ts文件代码 export const add = (a: number, b: number): number => { return a + b; }; export const minus = (a: number, b: number): number => { return a - b; };

// match.spec.ts文件代码 import { add, minus } from './match'; describe('测试add', function () { test('测试1+1', function () { expect(add(1, 1)).toBe(2); }); test('测试2+2', function () { expect(add(2, 2)).toBe(4); }); }); describe('测试minus', function () { test('测试1-1', function () { expect(minus(1, 1)).toBe(0); }); test('测试2-2', function () { expect(minus(2, 2)).toBe(0); }); });

6、也可以将测试代码放到__tests__目录下，文件名与src里面的文件名保持一致

四、关于jsdom的使用

在jest初始化的时候会默认生成jsdom的，如果没有的话，可以在jest.config.ts中配置上testEnvironment: “jsdom”，jsdom官方地址

1、创建待测试的文件

/** 定义删除node节点 */ export const remove = (node: HTMLElement) => { node.parentNode?.removeChild(node); }; /**定义绑定事件 */ export const addEventListener = ( node: HTMLElement, type: any, listener: (this: HTMLElement, ev: MouseEvent) => any ) => { node.addEventListener(type, listener); };

2、单元测试文件

import { remove, addEventListener } from './../src/dom'; describe('dom节点测试', function () { test('测试remove方法', () => { document.body.innerHTML = `

`; const parentDom = document.getElementById('parent'); // 期望这个节点是div expect(parentDom?.nodeName.toLocaleLowerCase()).toBe('div'); const childDom = document.getElementById('children'); expect(childDom?.nodeName.toLocaleLowerCase()).toBe('div'); remove(childDom!); // 删除后期望是空节点 expect(document.getElementById('children')).toBeNull(); }); test('测试addEventListener方法', () => { document.body.innerHTML = ` `; const childDom = document.getElementById('children'); expect(childDom).not.toBeNull(); addEventListener(childDom!, 'click', () => { childDom!.innerHTML = '点击后的内容'; }); // 模拟点击 childDom?.click(); expect(childDom?.innerHTML).toBe('点击后的内容'); }); });

五、异步函数的测试

1、官方地址

https://jestjs.io/zh-Hans/docs/asynchronous

2、定义待测试的异步函数

export const callBack = (fn: Function) => { setTimeout(() => { fn({ code: 0 }); }, 3000); };

3、测试代码

import { callBack } from './../src/callback'; describe('测试异步方法', () => { test('测试异步', (done: Function) => { // 调用callBack方法 callBack((response: Record) => { expect(response).toEqual({ code: 0 }); done(); }); }); });

六、测试promise

1、待测试的方法

export const callPromise = (): Promise> => { return new Promise((resolve: Function) => { setTimeout(() => resolve({ code: 0 }), 3000); }); };

2、测试方法一

describe('测试promise', () => { test('方法一', (done: Function) => { callPromise().then((response: Record) => { expect(response).toEqual({ code: 0 }); done(); }); }); });

3、方式二

describe('测试promise', () => { test('方法二', async () => { const result: Record = await callPromise(); expect(result).toEqual({ code: 0 }); }); });

七、Mock的使用

1、关于介绍可以参考官方地址

https://jestjs.io/zh-Hans/docs/mock-functions

2、官方的测试案例

export const forEachFn = (items: number[], callback: Function) => { for (let index = 0; index < items.length; index++) { callback(items[index]); } };

import { forEachFn } from './../src/mock1'; describe('mock的测试', () => { test('测试forEach函数', () => { // mock一个函数 const mockFn = jest.fn((x: number) => 42 + x); // 调用定义的方法 forEachFn([0, 1, 2], mockFn); // 测试调用了几次 expect(mockFn.mock.calls.length).toBe(3); // 调用函数传递的参数 expect(mockFn.mock.calls[0][0]).toBe(0); expect(mockFn.mock.calls[1][0]).toBe(1); expect(mockFn.mock.calls[2][0]).toBe(2); // 调用函数的返回值 expect(mockFn.mock.results[0].value).toBe(42); expect(mockFn.mock.results[1].value).toBe(43); expect(mockFn.mock.results[2].value).toBe(44); }); });

3、测试函数的返回值

/**测试函数 */ export const exec = (callback: (name: string) => string) => { return callback('张三'); };

describe('测试函数', () => { test('测试exec函数', () => { // 模拟一个函数并且执行这个函数 const fn = jest.fn(); exec(fn); // 测试是否调用 expect(fn).toBeCalled(); expect(fn).toHaveBeenCalled(); // 测试调用次数 expect(fn).toBeCalledTimes(1); expect(fn).toBeCalledWith('张三'); // 测试返回值 fn.mockReturnValueOnce('张三'); expect(fn()).toBe('张三'); }); });

4、测试模拟接口请求，官方地址

import axios from 'axios'; /** 请求后端接口的方法 */ export const getUserList = async (): Promise => { return await axios.get('/user'); };

import axios from 'axios'; import { getUserList } from './../src/mock2'; jest.mock('axios'); describe('测试模拟接口', () => { test('调用后端用户接口', async () => { // 模拟数据 (axios.get as any).mockResolvedValue({ code: 0, message: '成功请求', result: {}, }); const result = await getUserList(); expect(result.code).toBe(0); }); });

八、钩子函数的使用

1、钩子函数对不同测试执行阶段提供了对应的回调接口

2、beforeAll 在所有测试用例执行之前执行

3、beforeEach 每个测试用例执行前执行

4、afterEach 每个测试用例执行结束时

5、afterAll 等所有测试用例都执行之后执行

6、only的意思是只调用特定的测试用例

let count: number = 0; describe('测试钩子函数', () => { beforeAll(() => { count++; console.log('beforeAll钩子函数', count); // 1 }); afterAll(() => { count++; console.log('afterAll在全部的钩子之后执行', count); // 8 }); beforeEach(() => { count++; console.log('在每一个测试单元的时候执行', count); //2,4 }); afterEach(() => { count++; console.log('在每一个测试单元之后执行', count); // 5,7 }); describe('测试单元', () => { test('测试单元1', () => { count++; console.log('测试单元1', count); // 3 }); test('测试单元2', () => { count++; console.log('测试单元2', count); //6 }); }); });

web前端 单元测试

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。