百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 优雅编程 > 正文

前端自动化测试框架Jest 基础入门

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

 一、引言

  前端这几年发展的非常迅速,我们的系统的功能正在变的越来越复杂,这对我们的前端工程化能力提出了更高的要求,听到工程化,大家的第一反应肯定是高质量的代码设计和高质量的代码实现。

  但实际上,前端自动化测试也是前端工程化里面非常重要的一个环节。

  二、Jest 基础入门

  一个普通前端听到自动化测试,第一反应可能是:我工作这么多年也没写过测试,这个东西有用吗?

  答:非常有用

  如果你打开GitHub,去看一下流行的开源库或者框架的源码,你会发现,在这些源码里面,全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……

  开源的工具需要稳定性,而引入前端自动化测试为开源项目提供稳定性,是再好不过的选择了。

  三、学习前提

  阅读这篇文章需要以下知识储备:

  ·js、es6 基础语法

  ·node、npm 相关知识

  ·git 的相关操作

  ·react或者vue,至少了解一个

  ·状态管理工具,至少了解一个

  四、背景及原理

  首先在任意目录下创建一个math.js文件,假设这个文件是一个数学库,里面定义两个函数,分别是加法和减法:

// math.js

function add(a, b) {

return a + b;

}

function minus(a, b) {

return a - b;

}

  这时候我们可以在业务代码里去使用这个数学库。

  但是,假如,上面的minus函数我们不小心写错了,把减法写成了乘法,如果直接在业务代码中使用这个方法,就会带来无法预期的bug。

  所以这时候,我们就需要对math.js这个公共库进行自动化测试,确保没问题之后,再让业务组件去调用,这样就会保证不会出特别多的bug了。

  我们可以这样做:

  在该目录下创建一个math.test.js文件,然后写一点测试代码:

const result = add(3, 7);

const expect = 10;

if (result !== expect) {

throw new Error(`3 + 7 应该等于${expect},结果却是${result}`);

}

const result = minus(3, 3);

const expect = 0;

if (result !== expect) {

throw new Error(`3 - 3 应该等于${expect},结果却是${result}`);

}

  这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。

  这就是自动化测试最原始的雏形。

  然后我们思考一个问题,如何将这堆代码进行简化,做成一个公用的函数,比如这样:

// 测试 3 + 3 是否等于 6

expect(add(3, 3)).toBe(6);

// 测试 3 - 3 是否等于 0

expect(minus(3, 3)).toBe(0);

  expect 方法实现:

function expect(result) {

return {

toBe(actual) {

if (result !== actual) {

throw new Error("预期值和实际值不相等");

}

},

};

}

  这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。

  虽然实现了 expect 函数,但是报错的内容始终是一样的,我们不知道是具体哪个方法出现了问题,这时候我们就会想到,我们需要将这个 expect 方法进一步做改良,我们如果能在 expect 方法外部再包装一层,就可以多传递一些额外的内容,比如创造这样的写法:

test("测试加法 3 + 3", () => {

expect(add(3, 3)).toBe(6);

});

test("测试减法 3 - 3", () => {

expect(minus(3, 3)).toBe(0);

});

  这样封装之后,我们既能进行测试,又能得到测试的描述。

  test 方法实现:

function test(desc, fn) {

try {

fn();

console.log(`${desc} 通过测试`);

} catch {

console.log(`${desc} 没有通过测试`);

}

}

  所以前端自动化测试到底是什么?

  答:实际上就是写了一段其它的用来测试的js代码,通过测试代码去运行业务代码,判断实际结果是否满足预期结果,如果满足,就是没有问题,如果不满足,就是有问题。

  上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。

相关推荐

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命令查找类型:二进制文件;...

取消回复欢迎 发表评论: