jest单元测试学习笔记

1、jest安装与初始化

yarn add jest -D
yarn add @types/jest ts-jest typescript  -D  // typescript环境目录下

npx ts-jest config:init    // 默认在根目录下会生成jest.config.js的默认配置

2、代码测试覆盖率

npx jest  --coverage  // 进行代码覆盖率的测试

npx jest  // 表示进行测试

npx jest --watch // 需要在git的环境下运行

npx jest --watchAll // 不退出进行进行不断测试

coverageDirectory: "coverage", // 在jest.config.js下的配置，表示报告的放置地方

3、jest的常用匹配器

test('测试', () => {
  // toBe匹配器
  //   expect(sum(1, 3)).toBe(4)

  // 匹配值相等的匹配器
  //   const a = { one: 1 }
  //   expect(a).toEqual({ one: 1 })

  //值是否为null
  //   const b = null
  //   expect(b).toBeNull()

  // 值是否是undefined
  //   expect(5).toBeUndefined()

  // 表示是否被声明
  //   const c = null
  //   expect(c).toBeDefined()

  //   expect(0).toBeTruthy() // 是否为真, 会被js转换
  //   expect(1).toBeFalsy() //是否为假

  // expect(1).not.toBeTruthy() //作用的效果与toBeFalsy相同，表示取反的意思

  //数字相关的匹配器
  // expect(10).toBeGreaterThan(9) // 表示10比9大
  // expect(10).toBeGreaterThanOrEqual(10) // 比上面多个等于的判断
  // expect(9).toBeLessThan(10) // 表示9比10小
  // expect(9).toBeLessThanOrEqual(9) // 比上面多个等于的判断
  // expect(0.1 + 0.3).toBeCloseTo(0.4) // 用于小数计算后的值的比对

  // 字符相关的匹配器
  // const str = 'http://www.baidu.com'
  // expect(str).toMatch('baidu')  // 使用字符进行匹配
  // expect(str).toMatch(/baidu/) //使用正则进行匹配

  // array set相关的匹配器
  // const arr = ['aaa', 'bbb', 'ccc']
  // expect(arr).toContain('ccc')
  // const set = new Set(['aaa', 'bbb', 'ccc'])
  // expect(set).toContain('bbb')

  //处理异常的匹配器
  const test = () => {
    throw new Error('error')
  }
  expect(test).toThrow('error') // 里面的字符表示抛出的异常，也可以写正则表达式
  // expect(test).not.toThrow() // 不可以通过
})

 4、jest异步代码的单元测试

 通过异步回调的形式实现

// 逻辑代码部份

// 模仿进行ajax请求，返回数据
const getData = (): Promise<Record<string, any>> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ result: false })
    }, 3000)
  })
}

// 通过回调的形式拿到数据
export const asyncData = (fn: (res: Record<string, any>) => void): void => {
  getData().then((res) => {
    fn(res)
  })
}

// 测试代码部份

import { asyncData } from './index'

// 这个时候测试的时候，需要在回调函数中加入done这个函数方法，只有在结果进行返回的时候才确认请求结束，否则测试结果不准确
test('异步测试', (done) => {
  asyncData((res) => {
    expect(res).toEqual({ result: true })
    done()
  })
})

 通过async await 的方式进行调用

// 逻辑代码部份
// 模仿进行ajax请求，返回数据
const getData = (): Promise<Record<string, any>> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ result: false })
    }, 3000)
  })
}

// 通过回调的形式拿到数据
export const asyncData = (): Promise<Record<string, any>> => {
  return getData()
}

// 测试代码部份
// 方式一
// 这个时候需要return异步结果
// test('异步测试', () => {
//   return asyncData().then((res) => {
//     expect(res).toEqual({ result: true })
//   })
// })

// 方式二
test('异步测试', async () => {
  const res = await asyncData()
  expect(res).toEqual({ result: true })
})

 在原有逻辑代码的基础上，做分支检测判断

test('异步测试', () => {
  expect.assertions(1)  // 表示下面的逻辑一定有一个expect会被执行，里面的参数表示会被执行的expect的个数
  return asyncData()
    .then((res) => {
      expect(res).toEqual({ result: true })
    })
    .catch((err) => {
      expect(err.message).toMatch('error')
    })
})

 jest内部支持的异步测试

test('异步测试', async () => {
  // return expect(asyncData()).resolves.toMatchObject({
  //   result: true,
  // })

  // await expect(asyncData()).resolves.toMatchObject({
  //   result: true,
  // })

  // return expect(asyncData()).rejects.toThrow('error')
  await expect(asyncData()).rejects.toThrow('error')
})

 jest的钩子函数以及分组

import { asyncData } from './index'

describe('this is outer first', () => {
  beforeAll(() => {  // 表示在所有测试用例跑之前运行
    console.log('this is beforeAll') 
  })
  beforeEach(() => { // 表示在每个测试用例跑之前运行
    console.log('this is beforeEach')
  })

  afterAll(() => { // 表示在所有的测试用例完成之后运行
    console.log('this is afterAll')
  })

  afterEach(() => { // 表示在每个测试用完成后运行
    console.log('this is afterEach')
  })

  describe('this is inner first', () => {
    beforeAll(() => { // 表示在当前的分组内的所有测试用例运行之前运行
      console.log('this is inner beforeAll')
    })
    beforeEach(() => { // 表示在当前分组内的每个测试用例运行之前运行
      console.log('this is inner beforeEach')
    })
    it('this is test', () => {
      return expect(asyncData()).rejects.toThrow('error')
    })
  })
})

注意： describe是一个分组的概念，表示对指定块的测试进行分组，组外与组内的钩子的运行顺序是先组外后组内