首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript 测试系列实战(一):使用 Jest Enzyme 测试 React 组件

本篇教程是 JavaScript 测试系列实战 的第一篇教程,首先介绍了测试的类型,然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试,然后使用 Enzyme 对 React 组件进行浅层渲染...,它接受一个表达式,然后后面可以调用 Matcher 来测试该表达式是否符合条件,例如这里我们就使用了最常用的 toBe Matcher;Jest 还提供了大量的 Matcher,可以帮助我们写出更简洁可读的断言语句...因此这里建议直接使用 npx jest 执行测试。 编写第一组测试 每个测试文件通常有多个测试用例。Jest 允许我们通过 describe 函数对测试用例进行分组,它创建了一个可以组合多个测试的块。...Jest 测试文件中使用它。...配置 jest-enzyme 你应该还记得,在刚才的测试代码中,我们还是使用Jest 自带的 Matcher(toEqual)。

2.9K10
您找到你想要的搜索结果了吗?
是的
没有找到

使用jest进行单元测试

今年的不幸与坎坷使我有很长一段时间去思考人生,不想将就了,鲁棒健壮的程序,开发测试应该是分得很开的,于是我选择jest去做单元测试这件事。...不扯犊子直接说吧,第一点,用数据、用茫茫多的测试用例去告诉使用者,你的程序是多么鲁棒健壮;第二点,把它作为一种素养去培养吧,当你按照一系列规范去做事,那么你做出来的东西,我想是有品质在的。...jest的相关配置 package.json中相关scripts 这里笔者罗列了常用的通用的一些关于jest的脚本,后面测试结果会陆续补充一些测试脚本,以上的脚本都编写在package.json文件下的.../test/caculator.test.js --watch": 单文件监视测试 "test:watchAll": "jest --watchAll": 监视所有文件改动,测试相应的测试。...大致基础类的脚本测试就总结到这里,接下来我们看下jest.config.js的相关配置。

3.5K60

使用Jest测试原生TypeScript项目

通过官网的Getting started 我们可以在最下方找到 ts-jest 不难理解,我们需要配的其实就是jest加载到什么样类型的文件,使用什么预处理来处理文件。...如果是js文件我通过babel-jest处理,css则使用jest-css-modules。假如没有这些配置,那import了你的库,库里有引入了高特性的js文件,或者css文件就会编译报错。...关于rootDir 在进行技术选型的过程中,我看了最新版本的vue-cli里推荐用哪些框架进行测试,一个是jest,还一个是krama+mocha。...写完了测试,给我们的jest.config 多加一行配置,来生成我们的测试报告(Jest内置了 istanbul) javascript module.exports = { // ... collectCoverage...总结 至此,你应该对前端UI测试应该大致有一个宏观的了解。 本文没有过多得介绍Jest的用法或者语法,希望可以给不知道如何做测试的朋友们一点方向,自己去尝试找到适合自己项目的才是最好的。

2.8K60

使用 Jest 进行前端单元测试

Jest 默认使用 Jasmine 语法,支持直接使用 Promise async/await 进行异步测试,支持对 React 组件进行快照监控, 扩展集成 Babel 等常用工具集也很方便。...目前 Jest 已经在 Facebook 开源的 React, React Native 等前端项目中被做为标配测试框架。 下面简单介绍一些 Jest 比较有用的功能用法。...Mock Jest 自带一个 mock 系统,并支持自动手动 mock。 通常项目中,要测试的文件可能带有很多调用依赖,另外单元测试环境真实环境可也能存在差异,使得脱离真实环境不能直接运行。...例如使用 jest.useFakeTimers() 把遇到的计时器挂起,在必要时再使用 jest.runOnlyPendingTimers() 执行掉已经挂起的计时器。...要了解更多可以阅读 官方文档 [附3] enzyme [附4] 。 异步支持 如果有使用过 node-tap 之类的老测试框架,在遇到异步情况时候肯定感受过麻烦了。

5.5K90

自动化测试 Jest使用总结基础篇

使用 jest 的原因 随着前端的发展,web的交互越来越复杂,自动化测试是非常有必要融入到开发的流程中,而目前界内普遍通用且比较火的就是有 facebook开发的 Jest 这套工具。...他可以创建测试用例,执行测试,自身还有驱动mock,且用起来也是很方便,正如 jest 的官网这样描述 jestJest is a delightful JavaScript Testing Framework...jest 做回调操作测试需要注意,函数的回掉情况。...async / await 使用 async / await 标记,进行异步校验,本质上 promise 的异步校验没有什么区别,只是使用 async / await 是可以获取结果之后在下一步校验,...钩子函数的使用 钩子执行 再执行测试文件的时候,如果有需要对函数进行特殊处理的可以在执行前执行后使用钩子函数,beforeEach and afterEach。

2.6K111

提高代码质量——使用JestSinon给已有的代码添加单元测试

现在,我们可以使用单元测试来提高自己的代码质量。下面,我将自己在使用JestSinon.js配置编写单元测试中的收获的经验踩到的坑进行总结,根据从零开始配置编写单元测试这一条线来进行分享。...Jest配置 安装依赖包 需要使用Jest,首先你需要进行安装,执行以下命令: npm install jest -D 如果你的项目中存在.babelrc文件(使用了babel 6)时,不论你测试的代码是否通过...编写单元测试 在本章中,我们会针对如何编写单元测试文件进行一个具体的讲解,其中包含: 同步函数测试 异步函数测试 HTTP测试 同时,我们会对当中使用到的JestSinon.js的API会进行简单介绍...,如果需要使用其他的API,可以自行阅读JestSinon.js的文档。...异步函数测试 异步函数主要分为两种——Callback方式Promise方式。这两种方式都很简单,下面我们对两种方式进行具体的介绍。详细内容可以见Jest文档中的测试异步代码。

3.7K00

Jest实战:单元测试与服务测试

而最近刚到团队,被安排给 vemoJS cloudbase-cli 写测试用例,并且要保证覆盖率! 这里主要以 vemojs 下的测试用例为主来讲解 Jest 要注意的地方。...(内置无头浏览器)来模拟用户使用,监听数据变动 jest 自带覆盖率统计工具 测试过程 针对上面的步骤以及核心的 jest 配置,分别做讲解。...配置文件命令行 jest 提供两种方式来让用户自定义配置,一个是根目录的 jest.config.js ,另一个是启动 jest 的时候给参数。我是采用两者混搭的方法。...这方面很多人可能会用 supertest 这个库来测试。...在做调研的时候发现,jest 的下载量更新记录远远高于 supertest,而且更纯粹。为什么这么说呢?它提供一种测试的组织形式,其它可以借助第三方库工具实现。

3.3K10

如何在过滤器中修改http请求响应

在一些业务场景中,需要对http的请求响应做加解密的操作,如果在controller中来调用加解密函数,会增加代码的耦合度,同时也会增加调试的难度。...一般在过滤器中修改请求响应,以往需要自行创建Wrapper包装类,从原请求Request对象中读取原请求,修改后重新放入新的请求对象中等等操作……非常麻烦。...,执行调用链(用新的请求对象响应对象) * 得到应用层的响应后(明文),执行修改响应函数,最后得到需要响应给调用方的响应(密文) */ ModifyResponseBodyWrapper...函数中使用的请求包装类ModifyRequestBodyWrapper响应包装类ModifyResponseBodyWrapper在文末附录中贴出,可以直接copy到项目工程中使用。...(密文) /** * 4.将修改后的响应体用原响应对象的输出流来输出 * 要保证响应类型原请求中的一致,并重新设置响应大小 *

69130

基于TypescriptJest刷题环境搭建与使用

写在前面 前几个月在公司用vue3 https://v3.vuejs.org/ts写项目,想巩固一下基础,于是我想起了去年基于JavaScriptJest搭建的刷题环境https://zhengjiangtao.cn.../coding,不如,给它搞个加强版,结合TypescriptJest https://jestjs.io/搞一个刷题环境https://zhengjiangtao.cn/coding-ts/,下面是我的一些使用心得...Jest是一个测试框架,具体的可以看我早年写的文章https://www.cnblogs.com/cnroadbridge/p/13524099.html, Babel是一个语言编译器,具体的也可以看我早年写的文章...环境搭建 前期工作 这里统一用yarn https://yarnpkg.com/来进行相关的npm 包https://www.npmjs.com/安装与维护,使用其他安装管理工具的参照着这个改吧。...这里以两数之和为例,做一个简单的代码测试,具体的如下: 源码 // code/sum.ts 两数之和测试案例 type sumType = (a: number, b: number) => number

1.2K40

requests模块响应属性方法重新整理

下面的属性方法都是基于response对象` import requests response = requests.get('url') 一.url 返回值的url 二. text 获得响应文本信息...三.encoding 返回值的解码格式 四.apparent_encoding reuqests模块自动检测返回值信息,给你返回一个合适的解码格式.容易炸不实用 五.content 获得响应的二进制...,主要一般用于音频文件,视频文件等等用于二进制保存 六.json() 其本质json.loads(response.text) 七.status_code 响应的状态码 八.headers 响应的请求头...九.cookies 响应的cookie 十.history 响应的历史,这个这样理解,比如你访问一个网站http://url他其实会重定向https://url或者http://new_url 他会留下他重定向之前的

61320

异步函数中的异常处理及测试方法

你将学到什么 通过后面的内容你将学到: 如何从 Javascript 的异步函数中抛出错误 如何使用 Jest 测试来自异步函数的异常 要求 要继续往下读你应该: 对 Javascript ES6...有基本的了解 安装 Node.Js Jest 如何从 Javascript 的常规函数中抛出错误 使用异常而不是返回码(清洁代码)。...这是对它的测试使用Jest): ? 也可以从 ES6 的类中抛出错误。在 Javascript 中编写类时,我总会在构造函数中输入意外值。下面是一个例子: ? 以下是该类的测试: ?...以下是在Jest测试异常的规则: 使用 assert.throws 来测试普通函数方法中的异常 使用 expect + rejects 来测试异步函数异步方法中的异常 如果你对如何使用 Jest...测试 Koa 2 感兴趣,请查看使用JestSupertest进行测试的简绍这篇文章。

2.9K30

storybook的介绍使用 比较火的响应式UI开发及测试环境

storybook是一套最近比较火的响应式UI 开发及测试环境。...storybook 至于为什么叫storybook,应该是敏捷开发中的user story有关,找了篇 文章,不了解的同学可以看下 根据官网介绍一个story是一个或多个UI组件的单一状态,基本上像一个可视化测试用例...storybook本身提供了很多组件,也可以添加自己的组件作为story,方便他人查看,使用测试使用storybook你需要有react或vue的开发经验,并且熟悉es6。...下来带大家简单使用一下: 首先全局安装storybook命令: npm i -g @storybook/cli 来到一个已存在的react项目,可以是由creat-react-app创建的 在根目录执行...image.png 然后又多出来个名为.storybook的目录,里面有附件组件文件 addons.js config.js 安装后根据提示执行 yarn run storybook 启动storybook

3K40

【编程经验】结构的高级使用及共用的定义使用

结构数组 结构数组是一个数组,其数组的每一个元素都是结构类型。在实际应用中,经常用结构数组来 表示具有相同数据结构的一个群体,如一个班的学生档案,一个车间职工的工资表等。...定义结构数组 结构变量相仿,只需说明它为数组类型即可。...结构指针变量中的值是所指向的 结构变量的首地址,通过结构指针即可访问该结构变量。这与数组指针函数指针的情况是相同的。...结构 指针变量定义的一般形式为: struct 结构类型名 *结构指针变量名 共用的定义使用 在 C 语言中,允许几种不同类型的变量存放到同一段内存单元中,也就是使用覆盖技术,几个变量互 相覆盖...换句话说,每一瞬间只有一个成员起作用,其他的成员不起作用,即不是同时都存在 起作用的。 共用变量中起作用的成员是最后一次存放的成员,在存入一个新成员后,原有成员就失去作用。

1K110

8.1 定义使用结构变量

一、建立结构类型 C语言中允许用户自己建立由不同类型数据组成的组合型的数据结构,它称为结构 一般形式 struct 结构名 {成员表列}; 花括号内是该结构所包含的子项,称为结构的成员 注意...:结构类型的名字是由一个关键字struct结构名组合而成的 二、定义结构类型变量 有3种方法 (1)先声明结构类型,再定义该类型的变量 (2)在声明类型的同时定义变量 一般形式 struct...结构名 { 成员表列 }变量名表列; (3)不指定类型名而直接定义结构类型变量 一般形式 struct { 成员表列 }变量名表列...; 指定了一个无名的结构类型 三、结构变量的引用 一般形式 结构变量名.成员名 “.‘’是成员运算符,他再所有的运算符中优先级最高

6553129

9.1 定义使用结构变量

2、一般形式 struct 结构名 {成员表列}; 3、结构类型的名字是由一个关键字struct结构名组成而成的。结构名是用户指定的,又称“结构标记”,以区别于其他结构类型。...(2)这种声明方式是声明类型定义变量分离,在声明类型后可以随时定义变量,比较灵活。...2、在声明类型的同时定义变量 (1)一般形式 struct 结构名 { 成员表列 }变量名表列; (2)声明类型定义变量放在一起进行,能直接看到结构的结构,比较直观。...5、结构类型中的成员名可以与程序中的变量名相同,但二者不代表同一对象。 6、对结构变量中的成员,可以单独使用,它的作用与地位相当于普通变量。...03 结构变量的初始化引用 1、在定义结构变量时可以对它的成员初始化。初始化列表是用花括号括起来的的一些常量,这些常量依次赋给结构变量中的各成员。

9903229
领券