jest学习02--异步测试/回调测试/异常测试/生成测试报告

前提说明

按照jest学习01中的步骤生成一个jest测试项目

安装配置测试报告插件，生成jest配置文件

pnpm add jest-html-reporter -D

jest --init

jest.config.js

module.exports = {
  // 是否收集测试覆盖率报告
  collectCoverage: true,
  // 测试覆盖率报告输出目录
  coverageDirectory: 'coverage',
  // 覆盖率阈值，如果没有达到阈值则测试失败
  coverageThreshold: {
		"global": {
      "branches": 50,
      "functions": 50,
      "lines": 50,
      "statements": 90
    },
    // "./src/components/": {
    //   "branches": 40,
    //   "statements": 40
    // },
    // "./src/reducers/**/*.js": {
    //   "statements": 90
    // },
    // "./src/api/very-important-module.js": {
    //   "branches": 100,
    //   "functions": 100,
    //   "lines": 100,
    //   "statements": 100
    // }
  },
  
// ...省略一堆内容
    reporters: [
        'default',
               [
                 './node_modules/jest-html-reporter',
                 {
                   //输出页面标题
                   pageTitle: '测试报告',
                   //插件将会输出的HTML报告的路径。
                   outputPath:'testReport/JesttestReport.html',
                   //为每个失败的测试输出详细的失败消息。
                   includeFailureMsg: true,
                 },
               ],
      ],
// ...省略一堆内容
    testResultsProcessor: './node_modules/jest-html-reporter',
// ...省略一堆内容
}

编写测试代码

demo03.ts

export function loadDataFromServer(num?:number):Promise<number>{
    return new Promise((reslove,reject)=>{
        num!==undefined ? reject(new Error('手动抛出的异常')):reslove(123)
    })
}

export function callbackFun(callback):Promise<null>{
    return new Promise((reslove)=>{
        callback()
        reslove(null)
    })
}

demo03.spec.ts

import {test,describe,expect,beforeEach,afterEach,beforeAll,afterAll} from '@jest/globals'
import {loadDataFromServer,callbackFun} from './demo03'

beforeAll(()=>{
    console.log('所有单元测试方法执行前执行(仅执行一次)')
})
afterAll(()=>{
    console.log('所有单元测试方法执行后执行(仅执行一次)')
})
beforeEach(()=>{
    console.log('每个单元测试方法执行前都运行')
})
afterEach(()=>{
    console.log('每个单元测试方法执行后都运行')
})
describe('异步测试',()=>{
    test('promise then方式',()=>{
        loadDataFromServer().then((num:number)=>{
            expect(num).toEqual(123)
        })
    })
    test('async await方式',async ()=>{
        const num = await loadDataFromServer()
        expect(num).toEqual(123)
    })
    test('异常测试',async ()=>{
        expect.assertions(1)
        try {
            const num = await loadDataFromServer(10)   
        } catch (error) {
         expect(error.message).toMatch('手动抛出的异常')   
        }
    })
    test('回调测试',done=>{
        callbackFun(()=>{
            console.log('回调方法执行')
            done()
            const obj = {name:'张三',age:12}
            expect(obj).toEqual({name:'张三',age:12})
        }).then((ret)=>{
           expect(ret).toBeNull()
        })
    })
})

源码

gitee.com/free_pan/je…