前端单元测试jest——笔记总结

介绍

        在开发过程中我们需要对自己写的代码进行测试，Jest：Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。jest中文文档

安装

        新建文件夹jest，在该文件夹路径中执行cnd打开命令提示符执行npm init来初始化package.json配置文件，执行以下命令：

• npm i jest -D 命令安装jest
• npx jest --init 生成jset配置
• npx jest 运行测试用例
• npx jest --coverage 生成测试报告

 

语法

//描述：参数1是测试描述,参数2是回调函数，
//回调函数中expect需要测试的方法或值,
//后面是匹配器(函数的返回值是否和匹配器传入值相匹配)

//同步测试
test('测试描述', () => {
    //expect需要测试的值,后面是匹配器
 	expect(val).toEqual(val)
})

//异步promise测试，async/await
test('测试描述', async () => {
 	 const res = await pro()
     expect(res).toEqual(val)
})

常用匹配器

1. toBe(val) 绝对相等，基础类型，===

2. toEqual(val) 值的相等，引用类型

3. toStrictEqual(val) 深度判断值得相等

4. toBeNull() 是否为null

5. toBeUndefined() 是否undefined

6. toBeDefined() 是否有值，不是undefined

7. toBeTruthy() 是否true，会进行类型转换

8. toBeFalsy() 匹配是否false，会进行类型转换

9. toMatch(val) 匹配字符串是否包含val

10. toContain(val) 匹配数组是否包含val

11. toThrow() 匹配异常,有通过,如果传参,参数和抛出异常要一致才通过

  更多匹配器参考官方文档：jest官方文档

生命周期钩子函数

//所有测试用例之前
beforeAll(() => {

})

//每个测试用例之前
beforeEach(() => {

})

//每个测试用例之后
afterEach(() => {

})

//所有测试用例之后
afterAll(() => {

})

分组

describe('分组描述', () => {
	//测试用例
})

代码案例

js文件方法

/**
 * 多维数组扁平化
 * @param {Array} primaryArr 数组源
 * @returns Array
 */
const practice = (arr = [], newArr = []) => {
	arr.forEach(item => (Array.isArray(item) ? (newArr = newArr.concat(practice(item))) : newArr.push(item)))
	return newArr
}

//根据参数返回2中结果
function mon (mon) {
  return mon > 200 ? '一级' : '二级'
}

module.exports = {
  practice,mon
}

jest文件测试用例

// 导入需要测试的方法
const {practice, mon} = require('../js/index.js')

// 生命周期：所有测试用例之前
beforeAll(() => {
  console.log('之前');
})

describe('分组一', () => {
  // 生命周期：每个测试用例之前
  beforeEach(() => {
    console.log('每个之前');
  })
  test('数组扁平化', () => {
    expect(practice([1,[2,[3,[4]]]])).toEqual([ 1, 2, 3, 4 ])
  })
  test('逻辑判断1', () => {
    expect(mon(201)).toBe('一级')
  })
  test('逻辑判断2', () => {
    expect(mon(201)).toBe('二级')
  })
})

describe('分组二', () => {
  afterEach(() => {
    console.log('每个之后');
  })
  test('取反测试', () => {
    console.log('第三个');
    const a = false
    expect(a).not.toBeTruthy()
  })
})

// 生命周期：所有测试用例之后
afterAll(() => {
  console.log('之后');
})

编写代码后就可以执行npx jest命令运行了，生成以下结果：