前端自动化测试

目前市面上最受欢迎的前端自动化测试工具（只针对将要学习的两个框架 jest和Cypress框架做介绍）：

1、jest：jest是最受欢迎的javascript测试框架之一，用于编写单元测试和集成测试，它具有强大的断言库、模拟功能、以及内置的测试运行器。官方文档：jestjs.io/zh-Hans/

2、Cypress：Cypress是一款流行的端到端的测试工具，专注于用户界面的自动化测试，它提供了直观的API，实时重新加载和交互式调试功能。官方文档：docs.cypress.io/zh-cn/

Cypress和Jest的区别：

1. 测试类型不同：

   • Cypress主要用于端到端（End to End）的测试，也称e2e测试。它模拟用户与应用程序的交互，可以执行整个应用程序的测试场景。

   • Jest主要用于单元测试和集成测试，用于测试应用程序的单个模块、函数和组件。通常更专注于代码的单元和功能的隔离测试。

2. 运行环境的不同：

   • Cypress运行在真实的浏览器中，它可以模拟用户与应用程序的交互、包括点击、输入、导航等。更适用于模拟用户行为的端到端测试。
   • Jest运行在node.js环境中，通常用于测试Javascript代码的逻辑，不具备浏览器交互能力，因此不能执行像点击链接或填写表单等行为。

3. 用途不同：

   • Cypress主要用于测试应用程序的用户界面和交互，更适合于检查用户界面的正确性、性能和可访问性。
   • Jest主要用于测试Javascript代码逻辑的正确性，包括函数、模块和组件。更适合于功能测试和单元测试以及逻辑测试。

4. 语法和API不同：

   • Cypress提供了专门的API用于模拟用户行为，访问DOM元素，并执行端到端测试。语法更加实用于模拟用户行为。
   • Jest提供了用于编写断言的函数，以验证代码的输出是否符合预期，语法更适用于单元测试和逻辑测试。

5. 安装和配置不同：

   • Cypress和Jest都需要安装和配置，但是在配置方面有一些差异。Cypress通常需要配置浏览器驱动程序，而Jest需要配置测试运行器和模块处理器。

6. 测试速度不同：

   • Cypress测试通常会比较慢，因为它运行在真实的浏览器中，模拟用户交互。

   • Jest测试速度比较快，因为它运行在node.js环境中，不需要模拟浏览器的交互。

Jest的入门篇

一、匹配器的使用：

// 本文件主要为了学习各种匹配器的使用

test('toBe匹配器的测试用例', () => {
	// toBe匹配器是工作中常用的一种精确匹配器，简单的理解它就是绝对相等，相当于“===”
	// 这里的a和{name: 'heqian.js'}是不完全相等的，因为引用地址不同
	const a = 1
    expect(a).toBe(1)
		// 测试结果通过
})

test('toEqual匹配器的测试用例', () => {
	// 为了解决工作中处理内容相等的情况需要使用toEqual，可以理解为只要内容相等就可以通过测试
	// 在不需要严格匹配但要求值相等时就可以使用toEqual匹配器
	// 注意：toEqual会递归检查对象或者数组的每个元素
	const a = {name: 'heqian.js'}
	expect(a).toEqual({name: 'heqian.js'})
	// 测试结果通过
})

test('toBeNull匹配器的测试用例', () => {
	// toBeNull匹配器只匹配null值，需要注意的是不匹配undefined得值
	const a = null
	expect(a).toBeNull()
	// 测试结果通过
})

test('toBeUndefined匹配器的测试用例', () => {
	// toBeUndefined匹配器只匹配undefined
	const a = undefined
	expect(a).toBeUndefined()
	// 测试结果通过
})
test('toBeDefined匹配器的测试用例', () => {
	// toBeDefined匹配器的意思是只要定义过就可以匹配成功
	const a = 'heqian.js'
	expect(a).toBeDefined()
	// 测试结果通过
})

test('toBeTruthy匹配器的测试用例',() => {
	// toBeTruthy匹配器相当于判断真假，值为真则可以通过测试，值为假测不通过测试
	const a = 1 // 0不会通过测试，因为Boolean(0)为false
	expect(a).toBeTruthy()
	// 测试结果通过
})

test('toBeFalsy匹配器的测试用例', () => {
	// toBeFalsy匹配器相当于判断真假，值为假则通过测试，反之不通过
	const a = undefined
	expect(a).toBeFalsy()
	// 测试结果通过
})

test('toBeGreaterThan匹配器的测试用例',() => {
	// toBeGreaterThan匹配器用于匹配大于项
	const count = 10
	expect(count).toBeGreaterThan(9)
	// 测试结果通过
})

test('toBeLessThan匹配器的测试用例', () => {
	// toBeLessThan匹配器用于匹配小于于项
	const count = 10
	expect(count).toBeLessThan(11)
	// 测试结果通过
})

test('toBeGreaterThanOrEqual匹配器的测试用例', () => {
	// toBeGreaterThanOrEqual用于匹配小于等于项
	const count = 12
	expect(count).toBeGreaterThanOrEqual(12)
	// 测试结果通过
})

test('toBeLessThanOrEqual匹配器的测试用例', () => {
	// toBeLessThanOrEqual用于匹配大于等于项
	const count = 12
	expect(count).toBeLessThanOrEqual(12)
	// 测试结果通过
})

test('toBeCloseTo匹配器的测试用例', () => {
	const one = 0.1
	const two = 0.2
	// 解决javascript在计算的时候出现精度丢失的问题
	expect(one + two).toBeCloseTo(0.3)
	// 测试结果通过
})

test('toMatch匹配器的测试用例', () => {
	// 匹配字符串中是否存在某个字符
	const str = 'heqian,xiaowang,wanger'
	expect(str).toMatch('heqian')
})

test('toContain匹配器的测试用例', () => {
	// 匹配数组中是否存在某个元素
	const arr = ['heqian','xiaowang','wanger']
	expect(arr).toContain('heqian')
})

test('toContain匹配器的测试用例', () => {
	// 匹配数组中是否存在某个元素
	const arr = ['heqian','xiaowang','wanger']
	const data = new Set(arr)
	expect(data).toContain('heqian')
})

const throwNewErrorFunc = () => {
	throw new Error('this is error')
}
test('toThrow匹配器的测试用例', () => {
	// 检测抛出异常
	expect(throwNewErrorFunc).toThrow('this is error')
})