百度360必应搜狗淘宝本站头条
linux文件压缩linux用户组查看linux磁盘mysql安装linuxlinux多线程
当前位置：网站首页 > 优雅编程 > 正文

使用Jest进行前端单元测试（javascript test）

sinye56 2024-10-25 16:23 5 浏览 0 评论

对于逻辑复杂、迭代频繁的前端项目，进行单元测试很有必要。

这样可以节省大量E2E测试的时间，保证代码的可靠性，量化评估研发团队、测试团队的产出。

1. 选型

常见的前端单元测试框架，有Mocha、Jasmine、Jest。我的选型思路如下：

  • Mocha不自带断言，需要结合其他断言库才可使用。Jasmine、Jest自带断言；
  • Github上，Star数分别是：Mocha 20.4k，Jasmine 15.1k，Jest 34.7k；
  • Jest由Facebook出品。

综上，选择Jest。

2. 覆盖率报告

先说重点：

  • Jest自带HTML格式的覆盖率报告，没有必要再安装jest-html-reporter这种第三方库。
  • 要生成HTML覆盖率报告，需要手动修改Jest配置文件。

先配置一下Jest。如果按照官网的教程，直接执行jest --init会报错。应该执行：

npx jest --init

选择需要覆盖率报告：

配置完成后，会生成一个jest.config.js文件。

执行npm test，还是没有覆盖率报告：

还得修改jest.config.js文件，将 collectCoverage设置为true，并解除注释：

// Indicates whether the coverage information should be collected while executing the test
collectCoverage: true,

再次执行npm test，控制台就会展示覆盖率情况了：

同时，Jest会生成一个coverage目录，其子目录lcov-report内的index.html就是HTML格式的覆盖率报告了：

3. 第三方覆盖率报告

如果想要使用jest-html-reporter这个第三方库生成覆盖率报告，也不要按它主页所说的进行配置。直接在package.json新增如下配置最方便：

"jest": {
  "reporters": [
    "default",
    ["./node_modules/jest-html-reporter", {
      "pageTitle": "Test Report"
    }]
  ]
}

jest-html-reporter生成的覆盖率报告如下：

对比一下，还是Jest原生的覆盖率报告信息更全、样式更美观。

4. 量化评估产出

看覆盖率报告即可：

  • 覆盖率不够：测试团队需要补充测试用例；
  • 通过率不是100%：研发团队需要修正bug，提高代码质量。

相关推荐

Linux在线安装JDK1.8

首先在服务器pingwww.baidu.com查看是否可以连网然后就可以在线下载一、下载安装JDK1.81、在下载安装的同时做好一些准备工作...

Linux安装JDK，超详细

1、了解RPMRPM是Red-HatPackageManager（RPM软件包管理器）的缩写，这一文件格式名称虽然打上了RedHat的标志，但是其原始设计理念是开放式的，现在包括OpenLinux...

Linux安装jdk1.8(超级详细)

前言最近刚购买了一台阿里云的服务器准备要搭建一个网站，正好将网站的一个完整搭建过程分享给大家！#一、下载jdk1.8首先我们需要去下载linux版本的jdk1.8安装包，我们有两种方式去下载安装...

Linux系统安装JDK教程

下载jdk-8u151-linux-x64.tar.gz下载地址：https://www.oracle.com/technetwork/java/javase/downloads/index.ht...

干货|JDK下载安装与环境变量配置图文教程「超详细」

1.JDK介绍1.1什么是JDK?SUN公司提供了一套Java开发环境，简称JDK(JavaDevelopmentKit)，它是整个Java的核心，其中包括Java编译器、Java运行工具、Jav...

Linux下安装jdk1.8

一、安装环境操作系统：CentOSLinuxrelease7.6.1810(Core)JDK版本：1.8二、安装步骤1.下载安装包...

Linux上安装JDK

以CentOS为例。检查是否已安装过jdk。yumlist--installed|grepjdk或者...

Linux系统的一些常用目录以及介绍

根目录（／）：“／”目录也称为根目录，位于Linux文件系统目录结构的顶层。在很多系统中，“／”目录是系统中的唯一分区。如果还有其他分区，必须挂载到“／”目录下某个位置。整个目录结构呈树形结构，因此也...

Linux系统目录结构

一、系统目录结构几乎所有的计算机操作系统都是使用目录结构组织文件。具体来说就是在一个目录中存放子目录和文件，而在子目录中又会进一步存放子目录和文件，以此类推形成一个树状的文件结构，由于其结构很像一棵树...

Linux文件查找

在Linux下通常find不很常用的，因为速度慢（find是直接查找硬盘），通常我们都是先使用whereis或者是locate来检查，如果真的找不到了，才以find来搜寻。为什么...

嵌入式linux基本操作之查找文件

对于很多初学者来说都习惯用windows操作系统，对于这个系统来说查找一个文件简直不在话下。而学习嵌入式开发行业之后，发现所用到的是嵌入式Linux操作系统，本想着跟windows类似，结果在操作的时...

linux系统查看软件安装目录的方法

linux系统下怎么查看软件安装的目录？方法1：whereis软件名以查询nginx为例子...

Linux下如何对目录中的文件进行统计

统计目录中的文件数量...

Linux常见文件目录管理命令

touch用于创建空白文件touch文件名称mkdir用于创建空白目录还可以通过参数-p创建递归的目录...

Linux常用查找文件方法总结

一、前言Linux系统提供了多种查找文件的命令，而且每种查找命令都具有其独特的优势，下面详细总结一下常用的几个Linux查找命令。二、which命令查找类型：二进制文件；...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表