前端为什么需要单元测试?

06-01 1809阅读

一. 前言

对于现在的前端工程,一个标准完整的项目,通常情况单元测试是非常必要的。但很多时候我们只是完成了项目而忽略了项目测试。我认为其中一个很大的原因是很多人对单元测试认知不够,因此我写了这篇文章,一方面期望通过这篇文章让你对单元测试有一个初步认识。另一个方面希望通过代码示例,让你掌握写单元测试实践能力。

二. 前端为什么需要单元测试?

  1. 必要性:JavaScript 缺少类型检查,编译期间无法定位到错误,单元测试可以帮助你测试多种异常情况。

  2. 正确性:测试可以验证代码的正确性,在上线前做到心里有底。

  3. 自动化:通过 console 虽然可以打印出内部信息,但是这是一次性的事情,下次测试还需要从头来过,效率不能得到保证。通过编写测试用例,可以做到一次编写,多次运行。

  4. 保证重构:互联网行业产品迭代速度很快,迭代后必然存在代码重构的过程,那怎么才能保证重构后代码的质量呢?有测试用例做后盾,就可以大胆的进行重构。

三. 现状

下面是一份抽样调查片段,抽样依据如下:

  • 向 200 名相关者发出在线问卷调查,其中 70 人回答了问卷中的问题,前端人数占 81.16%,如果你有兴趣的话,也可以帮我填一下调查问卷 (https://www.wjx.cn/vm/Ombu9q1.aspx)

  • 目标群体:所有开发人员

  • 组织规模:不到 50 人,50 到 100人, 100人以上

    你执行过 JavaScript 单元测试吗?

    前端为什么需要单元测试?

     

    调查中的另一个有趣的见解是,在大型组织中单元测试更受欢迎。其中一个原因可能是,由于大型组织需要处理大规模的产品,以及频繁的功能迭代吧。这种持续的迭代方式,迫使他们进行自动化测试的投入。更具体地说,单元测试有助于增强产品的整体质量。

    前端为什么需要单元测试?

     

    另外,报告显示超 80% 人认为单元测试可以有效的提高质量,超 60% 人使用过 Jest 去编写前端单元测试,超 40% 的人认为单元测试覆盖率是重要的且覆盖率应该大于 80%。

     四. 常见单元测试工具

    目前用的最多的前端单元测试框架主要有 Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/),但我推荐你使用 Jest,因为 Jest 和 Mocha 相比,无论从 github starts & issues 量,npm下载量相比,都有明显优势。

    github stars 以及 npm 下载量的实时数据,参见:jest vs mocha (https://www.npmtrends.com/jest-vs-mocha) 截图日期为 2021.11.25

    Github stars & issues

    前端为什么需要单元测试?

    npm 下载量

    Jest 的下载量较大,一部分原因是因为 create-react-app 脚手架默认内置了 Jest, 而大部分 react 项目都是用它生成的。

    前端为什么需要单元测试?

    从 github starts & issues 以及 npm 下载量角度来看,Jest 的关注度更高,社区也更活跃

    框架对比
    框架断言异步代码覆盖率
    Mocha不支持(需要其他库支持)友好不支持(需要其他库支持)
    Jest默认支持友好支持
    • Mocha 生态好,但是需要较多的配置来实现高扩展性

    • Jest 开箱即用

      比如对 sum 函数写用例

      文件:./sum.js

      function sum(a, b) {
        return a + b;
      }
      module.exports = sum;
      

      Mocha + Chai 方式

      Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具

      文件:./test/sum.test.js

      const { expect, assert } = require('chai');
      const sum = require('../sum');
      describe('sum', function() {
        it('adds 1 + 2 to equal 3', () => {
          assert(sum(1, 2) === 3);
        });
      });
      

      Jest 方式

      Jest 默认支持断言,同时默认支持覆盖率测试

      文件:./test/sum.test.js

      const sum = require('./sum');
      describe('sum function test', () => {
        it('sum(1, 2) === 3', () => {
          expect(sum(1, 2)).toBe(3);
        });
        
        // 这里 test 和 it 没有明显区别,it 是指: it should xxx, test 是指 test xxx
        test('sum(1, 2) === 3', () => {
          expect(sum(1, 2)).toBe(3);
        });
      })
      

      可见无论是受欢迎度和写法上,Jest 都有很大的优势,因此推荐你使用开箱即用的 Jest

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们。

相关阅读

目录[+]

取消
微信二维码
微信二维码
支付宝二维码