专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端使用Jest 进行单元测试笔记

ins518 2024-09-22 11:37:29 技术文章 11 ℃ 0 评论

名词解释

覆盖率 :测试代码占得比例

单元测试 :模块测试

集成测试 :整体测试

运行测试:


	npm run test

初始化Jest

	npx jest --init 

配置文件

	jest.config.js


生成代码覆盖率文件

	npx jest --coverage


测试用例:

toBe 完全匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBe('希望的结果');

});

toEqual 内容匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toEqual('希望的结果');

});

toBeNull 为空匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBeNull();

});

toBeUndefined 未找到定义匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBeUndefined();

});

toBeDefined 未找到匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBeDefined();

});

toBeTruthy ture匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBeTruthy();

});

toBeFalsy falase匹配

test('这里是描述',()=>{

	expect('需要匹配的值').toBeFalsy();

});

toBeGreaterThan 大于匹配器

test('这里是描述',()=>{

	expect('需要匹配的值').toBeGreaterThan(需要检查的值,例如:1);

});

toBeLessThan 小于匹配器

test('这里是描述',()=>{

	expect('需要匹配的值').toBeLessThan(需要检查的值,例如:1);

});

toBeGreaterThanOrEqual 大于等于匹配器

test('这里是描述',()=>{

	expect('需要匹配的值').toBeGreaterThanOrEqual(需要检查的值,例如:1);

});

 

toBeLessThanOrEqual 小于于等于匹配器

test('这里是描述',()=>{

	expect('需要匹配的值').toBeLessThanOrEqual(需要检查的值,例如:1);

}); 

toBeCloseTo 模糊匹配(浮点数问题,用于计算)

test('这里是描述',()=>{

	expect('需要匹配的值').toBeCloseTo(需要检查的值,例如:1);

}); 

toMatch 字符串的含有查询

test('这里是描述',()=>{

	expect('需要匹配的值').toMatch(需要匹配的值,例如:1);

});

 

toContain 数组含有匹配器(可以匹配set)

test('这里是描述',()=>{

	const arr = [1,2,3,4] 

	const data = new Set(arr) 

	expect('需要匹配的值').toContain(需要匹配的值,例如:1);

});

toThrow 匹配异常器

 const errorFunc = () ={

	 throw new Erro ('Erro')

 }

test('这里是描述',()=>{

	expect(throw).toThrow('Erro');

});

不抛出异常(.not)

test('这里是描述',()=>{

	expect(throw).not.toThrow();

});

只执行这个测试

test.only('',()=>{

	consloe.log('只执行这个测试')

})

自动测试

package.json 文件

	"test" =>'jest --watchALL'

安装Babel(jest 不支持Es6+ )

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

	根目录新建.babelrc文件

	{

	    "presets":[

	        [

	                "@babel/preset-env",{

	                "targets":{

	                    "node":"current"

	                }

	            }

	        ]

	    ]

	}

异步测试

// 方法一

test('这里是描述',(done)=>{

   fetchData((data)=>{

       expect(data).toEqual({

           success: true

       })

       done()

   })

  })

// 方法二

test('这里是描述', ()=>{

       return  fetchTwoData().then((response)=>{

            expect(response.data).toEqual({

                success: true

            })

        })

  })

// 测试异常

test('这里是描述', ()=>{

      expect.assertions(1)  // 断言,必须执行一次expect

      return fetchThreeData().catch((e)=>{

        expect(e.toString().indexOf('404')> -1).toBe(true)

      })

  })

// 使用async...await...

test('这里是描述', async()=>{

	//resolves把现有对象转换成Promise对象,

	//toMatchObject 匹配对象中的属性

	await expect(fetchFourData()).resolves.toMatchObject({

		data:{

			success:true

		}

	})

  })


Jest 四个钩子函数

beforeAll(()=>{

		console.log('最先执行的测试用例')

	})

	afterAll(()=>{

		console.log('最后执行的测试用例')

	})

	beforeEach(()=>{

		console.log('每次测试前执行的')

	})

	afterEach(()=>{

		console.log('每次测试后执行的')

	})


测试分组

describe('最外层分组',()=>{

    beforeAll(()=>{

        console.log('最先执行的测试')

    })

    beforeEach(()=>{

        console.log('执行前的测试')

    })

    describe('分组一',()=>{

        test('测试一',()=>{

			console.log('测试一')

        })

        test('测试二',()=>{

			console.log('测试二')

        })

    })

    describe('分组二',()=>{

        test('测试一',()=>{

			console.log('测试一')

        })

        test('测试二',()=>{

			console.log('测试二')

        })

    })

    afterEach(()=>{

        console.log('测试完成后执行的')

    })

    afterAll(()=>{

        console.log('最后执行的测试')

    })

})

纯笔记,看起来可能有点枯燥。哈哈哈哈。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表