进入正文之前,我们首先需要思考几个问题:
- 为什么需要测试?
- 测试有哪几个阶段?
- TDD和BDD项目驱动模式
- 单元测试对于前端的重要性
- 软件开发模型和自动化测试
- 前端测试框架
为什么需要测试
- 保证产品质量、及时解决bug
- 前端代码与用户直接进行交互,任何逻辑错误或者界面错误都会造成用户体检的下降。提前对软件进行测试,不但可以发现并修复问题缺陷、性能瓶颈和UX/UI问题,保证了参与的稳定性和体验感
- 预防回归错误
- 在软件测试领域,回归错误(regression bug或 regression fault)是指在解决一个bug之后,原本没正常的功能出现了问题或者bug。通过进行测试,可以在修改代码后立即运行这些测试来验证现有功能是否仍然正常工作,防止回归错误的发生。
- 提高跨平台兼容性
- 前端代码需要在不同浏览器、环境和操作系统下保持一致的行为,通过自动化测试,可以方便跨浏览器和设备测试,确保代码在不同平台上运行的稳定性和一致性
- 降低维护成本
- 软件维护成本是需要进行测试的一个重要因素,如果软件存在缺陷和问题,如果软件在上线后才发现问题并去修复,整个维护成本将会变得非常高。一般来说,一个项目越到后期,修复一个bug的成本越高,因此通过测试可以帮助开发团队在软件上线前及时发现和修复bug,从而减低维护成本。
测试有哪几个阶段
- 静态测试
- 单元测试
- 集成测试
- E2E测试
静态测试
- 前端的静态测试不会设计到代码的运行,他是在代码编写过程对代码进行检查和分析,捕获编写代码中可能出现的语法错误或错别字,常用的工具有Typescript和Eslint静态测试。他们两个都可以在编写代码过程中检查编程语句的语法错误或拼写错误,给出错误提示。
// 使用 ESLint 的 for-direction 规则能让你更早的发现问题
for (var i = 0; i < 10; i--) {
console.log(i)
}
const two = "2";
// 使用 typescript 的静态检查功能也是能够提前发现问题
const result = add(1, two);
单元测试
- 单元测试往往是为了检验某一单独部分能否正常工作,是测试过程中的最小测试单元(通常是一个方法或者函数),所以单元测试顾名思义就是通过测试示例检验某个函数或者方法的可行性,能够通过单元测试,说明方法的可行性和稳定性。
// 这是一个函数,该函数是对传入的两个参数做相加操作
function calculateSum(a, b) {
return a + b;
}
// 接下来我们要对上面的函数进行一个测试
describe("calculateSum", function() {
// 这个就是一个测试用例
it("should add two numbers correctly", function() {
expect(calculateSum(1, 2)).toEqual(3); // 期望传入 1,2 的时候得到的值为 3
expect(calculateSum