阅读 169

前端测试的好处?

为什么前端要有测试?

目前前端并不是之前的只是做一个界面的展示功能,还进行相关的页面交互。

  • 通常,作为前端开发人员来说,最大的测试就是打一个断点进行调试或者模拟基本的用户操作,只要能实现这个功能就可以了,不会或者很少去管整体的一个逻辑或者布局。在这样的基础上,如果我们的功能点选择重构或者在此基础上添加更多的功能点的时候,开发事件就会变长或者会重写整个页面。
  • 第二点就是我们在离职或者项目交接给别的团队的时候,别的团队不知道这个模块的意图和作用,只有一句一句的去读代码,也不清楚改动了逻辑之后会不会对现有的程序有什么影响,只有重新打断点进行调试。

这两点是前端开发人员在工作中都会或多或少的遇到的问题,所以说,前端如果自己写测试,将大大的减少以上两种问题产生的频率。我理解的前端写测试实际上就是写一些测试代码来验证你开发的功能和功能相关的代码是否符合预计的逻辑与设计。

前端测试的现状?

不知道大家发现没有,程序员都有一个通病,就是“对自己的代码过于自信”,大多数开发人员不会想到给自己的代码上一层双保险,导致很多时候很多低级问题的出现。还有一部分人有测试的想法,但是不知道自己该如何去做这个事情,不知道测试怎么写。那么还有少部分人呢,就是真的没有什么时间去写,由于项目的工期太紧,根本没有时间去做这个事情。 总结一下,目前前端测试的现状是这样的:

  1. 不重视前端测试,觉得并不重要
  2. 项目感进度,没有时间写
  3. 不知道怎么写
  4. 根本就没有意识

前端测试的好处

1、减少成本与开发量
2、写出更高质量的代码
3、重构或者重写代码的可靠度更高
4、前端流程更加规范
复制代码

前端测试的分类?

image.png

UI测试

测试用户界面的功能模块的布局是否合理,整体风格是否一致和各个控件的放置位置是否符合客户使用习惯,更重要的是要符合操作便捷,导航简单易懂,界面中文字是否正确,命名是否统一,页面是否美观,文字、图片组合是否完美。

集成测试

集成测试,也叫组装测试或联合测试。在单元测试的基础上,将所有模块按照设计要求(如根据结构图)组装成为子系统或系统,进行集成测试。

单元测试

软件中的最小可测试单元进行检查和验证。

三者的区别在哪里

1、单元测试:保证代码的逻辑正确
2、集成测试:保证个个端集成保证数据正确
3、UI测试:对界面的效果是否达到预期效果进行的测试,UI测试也可以进行单元测试
复制代码

三者的共同点:

都是为了减少bug,为提高代码质量与用户体验而生

常用测试工具

jest

是一个开箱即用、零配置,令人愉快的 JavaScript 测试框架,专注于简洁明快。

用法:

1、判断是否完全相等
test('two plus two is four', () => {
  expect(2 + 2).toBe(4);  //判断2+2是否为4
});
2、object类型的要用toEqual进行判断,只判断值相等
test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});
3、明确的区分nullundefined 或者不明显区分nullundefined 
> toBeNull matches only null
> toBeUndefined matches only undefined
> toBeDefined is the opposite of toBeUndefined
> toBeTruthy matches anything that an if statement treats as true
> toBeFalsy matches anything that an if statement treats as false
test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
})
....
复制代码

Jest是一个很好用的测试工具,如果你的项目是通过React脚手架进行搭建,那么项目本身也自带了一个测试工具,是基于Jest进行开发的,跳转官网即可看到使用方法,但是这个功能仅仅适用于react-scripts@0.3.0以及以上的版本,所以针对以下的版本,我们可以安装以下命令就可以啦
npm install --save-dev --save-exact react-scripts@0.3.0

Mocha

mocha是一个功能丰富的javascript测试框架,运行在node.js和浏览器中,使异步测试变得简单有趣。Mocha测试连续运行,允许灵活和准确的报告,同时将未捕获的异常映射到正确的测试用例。

用法

  1、判断是否相等
  var assert = require('assert');
    describe('Array', function() {
      describe('#indexOf()', function() {
        it('should return -1 when the value is not present', function() {
          assert.equal([1, 2, 3].indexOf(4), -1);
        });
      });
    });
   ...
复制代码

作为一款在当前前端测试市场举足轻重的框架,Mocha能够与模拟程序、第三方断言、以及chai和enzyme之类的探查工具相集成。除了拥有庞大的社区网络之外,Mocha还能够提供完善的功能选项和完备的文档资料。

QUnit

The powerful, easy-to-use JavaScript testing framework.

用法

1、判断是否相等
  function add(a, b) {
    return a + b;
  }

  QUnit.module('add', function() {
    QUnit.test('should add two numbers', function(assert) {
      assert.equal(add(1, 1), 2);
    });
  });
 ...
复制代码

QUnit是一个针对javascript应用程序的测试框架,它一开始是针对js、jQuery进行开发的,QUnit可以提供项目的环境支持,比如IOS、安卓、或者H5环境,并且能够测试代码中的异常。 QUnit主要的操作方法点这里!!

React为什么适合单元测试?

 1、单向数据流
 2、function组件
 3、component组件
 
复制代码

借鉴文章:九大高效的前端测试工具

文章分类
前端
文章标签