IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发测试 -> 前端单元测试相关概念及Jest测试框架入门 -> 正文阅读

[开发测试]前端单元测试相关概念及Jest测试框架入门

一、什么是单元测试

在维基百科上搜索unit test会看到这段话:

In computer programming, unit testing is a software testing method by which individual units of source code—sets of one or more computer program modules together with associated control data, usage procedures, and operating procedures—are tested to determine whether they are fit for use.

翻译:在计算机编程中,单元测试是一种软件测试方法,通过这种方法,对一个或多个计算机程序模块的源代码集的各个单元以及相关的控制数据、使用程序和操作程序进行测试,以确定它们是否适合使用。

这是Kolawa Adam在 Automated Defect Prevention: Best Practices in Software Management 一书中对单元测试的定义。结合百度百科写的,单元测试是指对软件中的最小可测试单元进行检查和验证。对于前端来说,就是通过编写完备的测试用例,来测试可测的函数,保证函数在各种情况下都能如期执行。

二、 相关概念

1、白盒测试和黑盒测试
白盒测试又称结构测试,即对程序内部的逻辑做细致性的测试,代码走查、单元测试等均属于白盒测试。
黑盒测试又称功能测试,即在不考虑内部实现的基础上对各个功能模块进行测试,主要测试接口能否跑通,功能是否正常。

2、TDD(Test-Driven Development)
测试驱动开发应有如下几个原则:
1)Add a test
在代码添加一个新特性之前需要先编写一个测试,这使得开发人员在编写代码之前就关注需求。这与通常的做法不同,如单元测试一般是在代码编写完成之后进行。
2)Run all tests. The new test should fail for expected reasons
运行所有测试,按预期新增的测试会失败。这证明了新的功能需要新的代码来完成。
3)Write the simplest code that passes the new test
编写最简单、最易于理解的代码来通过所有的测试。在这个阶段我们不用考虑代码是否是最优雅的或者性能最高的,只要通过测试即可。
4)Refactor as needed, using tests after each refactor to ensure that functionality is preserved
重构代码,让代码具有更高的可读性、可维护性。重构之后必须保证所有测试同样通过。
5)Repeat
每次添加新功能时均重复以上流程。测试应是小型的、增量的,避免出现测试不通过时大量修改代码的情况。

3、BDD(Behaviour-Driven Development)
行为驱动开发即通过使用简单的领域特定语言使用自然语言结构来表达行为和预期的效果。大部分BDD软件工具遵循以下流程:

  • Scenario(场景),说明功能的例子
  • Given(假如),构造测试的环境条件
  • When(当),给予的输入,可以是用户,也可以是外部系统,也可以是系统本身定时/条件触发的
  • Then(那么),系统的输出,或者说行为

若干个Given,When,Then构成一个Scenario,若干个Scenario构成一个Feature,若干个Feature最终构成一个系统的完整功能需求。

4、ATDD(Acceptance Test-Driven Development)
验收测试驱动开发与BDD非常相似,如果说BDD是让除开发外的人了解需求,那ATDD则是更加细化需求,如测试工程师编写测试用例提供给开发用于冒烟。

总结一下:通常单元测试的时机在于代码编写完成之后,这意味着测试的粒度与TDD相比更加“粗”一点,需要关注的边界条件更加多,测试用例更加复杂,但好处就是效率是要更高的。

三、测试框架Jest

背景:测试typescript编写的react代码。

1、安装依赖,其中jest是基础库,@types/jest提供了类型提示,ts-jest提供了检测ts代码的能力。

yarn add -D jest @types/jest ts-jest

2、生成 jest.config.js 文件

yarn ts-jest config:init

3、将如下代码添加到 package.json 中:

{
  "scripts": {
    "test": "jest"
  }
}

4、编写测试用例后,运行 yarn test

/**
 * util.ts
 * 编写一个加法函数
 */
export const add = (a: number, b: number) => {
  return a + b
}
/**
 * __test__/util.test.ts
 * 编写测试用例
 */
import { add } from '../util'

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

test('adds -1 + 2 to equal 1', () => {
  expect(add(-1, 2)).toBe(1);
});

test('adds 2 + 3 to equal 5', () => {
  expect(add(2, 3)).toBe(5);
});

运行 yarn test 后的结果为:

在这里插入图片描述
在大部分情况下,我们只想为新增的页面或者文件跑case,我们可以用命令 yarn test fileName [-t caseName],例如:

yarn test util.test.ts -t 'adds 1 \+ 2 to equal 3'

结果如下:

在这里插入图片描述
每次敲一行代码略显麻烦,vscode可以安装 Jest Runner 这个插件,安装之后执行单个用例或单个文件极为方便:

在这里插入图片描述
Jest框架的具体使用可以去官网进一步学习,后续也会写一篇文章来讲讲一些常用的方法。

  开发测试 最新文章
pytest系列——allure之生成测试报告(Wind
某大厂软件测试岗一面笔试题+二面问答题面试
iperf 学习笔记
关于Python中使用selenium八大定位方法
【软件测试】为什么提升不了?8年测试总结再
软件测试复习
PHP笔记-Smarty模板引擎的使用
C++Test使用入门
【Java】单元测试
Net core 3.x 获取客户端地址
上一篇文章      下一篇文章      查看所有文章
加:2022-04-07 23:01:13  更:2022-04-07 23:02:06 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/18 0:16:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码