前端代碼接入單元測試

一、單元測試發展

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小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。