在软件测试中,自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后,测试自动化可以自动执行的一些重复但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言,测试自动化是至关重要的。 ——来自 WiKi 百科
随着前端项目的发展,其规模和功能日益增加。为了提高项目的稳定性和可靠性,除了需要测试工程师外,前端自动化测试也成为了不可或缺的一环。采用前端自动化测试可以有效地提高代码质量,降低出错的概率,从而使项目更加健壮和更易维护。
又称为模块测试 ,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。在前端中,一个函数、一个类、一个模块文件,都可以进行单元测试,测试时每个模块都是互不干扰的。
是在单元测试的基础上,测试再将所有的软件单元按照概要设计规格说明的要求组装成模块、子系统或系统的过程中各部分工作是否达到或实现相应技术指标及要求的活动。用户的开始操作到结束操作这一整个行为流程可以当作集成测试。
TDD 是趋向于白盒测试,需要开发者对当前编写的模块思路足够清晰。
BDD 趋向于黑盒测试,只关注用户的一整套行为流程下来是否会成功。
不使用测试框架,我们该如何测试自己的模块呢?如果我们想要测试下面的代码,应该需要两个值,一个是 期望值 ,另一个是函数执行的 结果值 ,我们需要对比两个值来进行判断当前函数是否通过了测试用例。
// index.js
function ZcyZooTeam(str) {
return 'Zcy' + str;
}
需要下面的 if / else 进行判断当前的期望值 value 和结果值 result 是否相等,如果相等说明我们的测试用例通过了。我们将这两段代码复制到浏览器中,下面的执行不会通过,并会抛出错误,只有我们将传入值改为 ZooTeam 才会成功执行。
// no-jest.js
const result = ZcyZooTeam('Zero');
const value = 'ZooTeam';
if(result !== value) {
throw Error(`ZcyZooTeam 结果应为${value}, 但实际结果为${result}`);
}
如果我们有多个函数需要测试,你应该不想写许多个 if / else 代码块吧?所以我们要将上面的代码块进行优化成一个函数。
// no-jest.js
function expect(result) {
return {
// 用于判断是否为期望值
toBe(value) {
if(result !== value) {
throw Error(`结果应为${value}, 但实际结果为${result}`);
}
console.log('测试通过!');
}
}
}
// 执行测试
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam');
经过上面的封装,我们就可以只写一行代码进行测试了!
虽然上面的封装只需要书写一行代码就可以测试了,但是我们不知道执行结果和测试用例之间的对应关系,我们需要输出的文字来告诉我们当前是哪个测试用例执行了。
// no-jest.js
// 再封装如下方法
function test(msg, fn) {
try {
fn();
console.log(msg + '测试通过!');
} catch (error) {
console.log(msg + '测试未通过!' + error);
}
}
test('测试ZcyZooTeam', () => {
expect(ZcyZooTeam('Zero')).toBe('ZcyZooTeam')
})
成功和失败都会进行提示,这样我们就可以知道当前是哪个测试用例成功/失败了。
Jasmine 优点:易于学习和使用,支持异步测试,可以在浏览器和 Node.js 环境中运行,可以生成易于阅读的测试报告,可以与其他库和框架集成。
MOCHA 优点:支持异步测试和 Promise ,可以在浏览器和 Node.js 环境中运行,可以与其他库和框架集成,可以生成易于阅读的测试报告,可以使用各种插件和扩展来增强其功能。
Jest 是针对模块进行测试,单元测试对单个模块进行测试,集成测试对多个模块进行测试。
Jest 优点:速度快(单模块测试时,执行过的模块不会重复执行),API简单,易配置,隔离性好(执行环境相对隔离,每个文件单独隔离互不干扰),监控模式(更灵活的运行各种测试用例),适配编辑器多,Snapshot(快照),多项目运行(后台前台测试用例并行测试),生成可视化覆盖率简单,Mock 丰富。
npm i jest --save-D
// 初始化 jest 的配置文件
npx jest --init
// 你将在那个环境进行测试,回车即可选择
// 第一个是 node 环境、第二个是浏览器环境
? Choose the test environment that will be used for testing › - Use arrow-keys. Return to submit.
node
❯ jsdom (browser-like)
// 是否需要 jest 生成测试覆盖率报告
? Do you want Jest to add coverage reports? › (y/N)
// 是否需要在测试结束后清除模拟调用
? Automatically clear mock calls and instances between every test? › (y/N)
// 创建 jest.config.js 文件