前端自动化测试

自动化测试框架Jest
安装jest

npm install jest@24.8.0 -D

修改package.json中的test

"scripts": {
   "test": "jest"
 },

运行

npm run test

//配置jest，执行会生成jest.config.js的js文件
npx jest --init
//生成coverage文件夹的测试报告
npx jest --coverage

一般我们都不会使用commonJS语法，会使用import和export进行导出和引入

//math.js
export function add(a,b){
    return a + b
}
//math.test.js
import {add,reduce} from './math';
test('测试加法 3+7',() => {
    expect(add(3,7)).toBe(10)
})

这样我们在执行npm run test的时候就会报错，因为node不识别import的语法，所以jest也无法识别，可以通过安装babel来改善代码

npm install @babel-core@7.4.5 @babel-preset@7.4.5 -D

使用babel需要在项目的根目录下创建.babelrc文件,

{
    "presets":[
        ["@babel/preset-env",{
            "targets":{
                "node":"current"
            }
        }]
    ]
}

jest中的匹配器：

toBe():只匹配内容是否一样，涉及引用
toEqual():只匹配内容是否一样，不会涉及引用
toBeNull():匹配值是否是null，是则通过，不是则否
toBeUndefined():匹配值是否是undefined
toBeDefined():匹配值是否被定义
ToBeTruthy():匹配值是否是true
toBeFalsy():匹配值是否是false
not:取反
用法：
test('not匹配器',()=>{
	const a=1 //true
	expect(a).not.toBeFalsy()  //代表是true
	等价于：
	expect(a).ToBeTruthy()
})

//数字相关的匹配器
toBeGreaterThan():希望匹配值比某个值大
例：test('toBeGreaterThan匹配器',()=>{
	const a=10
	expect(a).toBeGreaterThan(9)//通过
	expect(a).toBeGreaterThan(11)//不通过
})
toBeLessThan():希望匹配值比某个值小
toBeGreaterThanOrEqual():希望匹配值比大于等于某个值
toBeLessThanOrEqual():希望匹配值比小于等于某个值
toBeCloseTo():匹配值是浮点数时
例：test('toBeCloseTo匹配器',()=>{
	const a=0.1
	const b = 0.2
	expect((a + b )).toBeCloseTo(0.3)//通过
})

和字符串相关的匹配器

toMatch():匹配值都否包含某个值

和数组相关的匹配器

toContain():匹配值是否包含某一项
toThrow():匹配项是否抛出异常

异步函数的测试：

//fetchData.js 异步函数
import axios from "axios"
import { fn } from "_jest-mock@24.9.0@jest-mock"
export const fetchData = (fn)=>{
    axios.get("http://www.dell-lee.com/react/api/demo.json")
    .then((res)=>{
        fn(res.data)
    })
}

//test.fetchData.js  测试异步函数
import {fetchData} from "./fetcData"
test("fetchData 返回结果为{success:true}",(done)=>{
    fetchData((data)=>{
        expect(data).toEqual({
            success:true
        })
        done();
    })
})
//失败情况下的测试异步函数
test("fetchData 返回结果为404",(done)=>{
	expect assertions(1)
    return fetchData().catch((e)=>{
		expect(e.toString().indexOf("404")>-1).toBe(true)
	})
})