前端自动化测试jest教程1-配置安装

最新推荐文章于 2023-01-06 15:58:06 发布
VIP文章 最新推荐文章于 2023-01-06 15:58:06 发布
阅读量1.1k 收藏 7
点赞数 2
分类专栏： 测试 文章标签： vue.js javascript 单元测试 前端 firebug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jsoning/article/details/103878945
版权

前言

在这里插入图片描述
前端早已不在是简单的切图仔，web前端工程师也在逐渐淡出江湖。大前端的时代早已来临，面对日新月异的技术我们只能不断学习，逐个点亮技能点。

现在随处可见的单元测试，在主流框架以及UI组件中都可以见到，单元测试的优势就不言而喻了。本系列文章将带你学习前端自动化测试 jest框架 ，包括基本的配置、jest匹配器、异步代码测试、钩子函数、mock以及在vue项目中的实际应用等等，如果想继续学习后面文章，请关注我，后面会不断写完整个jest的教程

为什么选择jest？

  • 零配置：在大部分项目中都可以实现开箱即用，无需配置
  • 速度快：根据文件的修改进行测试，不会每次测试全部实例
  • 快照功能：能够进行简单快速的测试
  • 隔离性好：不同的测试文件环境独立，不会相互影响
  • api简单
  • mock丰富
  • 等等

基本安装配置

  1. 创建demo文件夹
  2. 进入文件夹中运行npm init 初始化一个package.json文件
最低0.47元/天 解锁文章
前端秀儿
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端开源库-jest-html-reporter
08-29
前端开源库-jest-html-reporterjest html reporter，用于以html生成摘要的jest测试结果处理器
初探：使用Jest进行React单元测试
不怕麻烦的鹿丸的博客
11-29 1080
会在根目录下生成coverage文件夹，里面有index.html 文件可以打开查看覆盖率。在React项目里，如果你使用 Create React App，craco.config.js文件里可以配置jest参数。在src文件夹目录下，有setupTests.js文件。执行npm run test 进行单元测试。且包含许多实用的默认配置。
jest-canvas-mock:用于在Jest中模拟画布的模块
05-09
开玩笑的帆布模拟 当开玩笑地运行单元测试用例时，模拟canvas 。 对于更多的浏览器环境，您可以使用来实现实际的浏览器运行时。 安装 这仅应作为开发依赖项（ devDependencies ）安装，因为它仅用于测试。 npm i --save-dev jest-canvas-mock 设置 在jest下的package.json ，创建一个setupFiles数组，然后将jest-canvas-mock添加到该数组中。 { " jest " : { " setupFiles " : [ " jest-canvas-mock " ] } } 如果已经具有setupFiles属性，则还可以将jest-canvas-mock附加到数组。 { " jest " : { " setupFiles " : [ " ./__setups__/other.js " ,
jest-to-match-shape-of:一个Jest匹配器，用于验证对象的形状。 使集成测试变得简单
05-02
toMatchShapeOf 一个用于验证对象的结构，对于api集成测试特别有用 安装 yarn add jest-to-match-shape-of npm install jest-to-match-shape-of --save 在您的setupTests.js中 // src/setupTests.js const { toMatchOneOf , toMatchShapeOf } = require ( 'jest-to-match-shape-of' ) expect . extend ( { toMatchOneOf , toMatchShapeOf , } ) 或者如果您使用的是Typescript // src/setupTests.ts import { toMatchOneOf , toMatchShapeOf } from 'jest-to-matc
js笔记十七:typescript项目的jest项目配置全过程
过客2019
07-18 1186
typescript项目的jest项目配置全过程
单元测试（jest）：理解、安装、使用
snowball的博客
11-16 3834
2.1、Jest：Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。终究会暴露，越早越好。从团队的角度讲，开发人员的代码经过完整的单元测试，可以有效的减少测试成本，维护成本，运维成本，运营成本。从技术的角度讲，有效的提高代码的健壮性，有效的增加代码的可维护性，对于后期的代码重构是必要条件。解：我理解，我项目是vite项目，不是vue-cli项目，不能使用这个命令安装jest。
万字详文：彻底搞懂 Jest 单元测试框架
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-31 2409
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群什么是Jest测试意味着什么我怎么知道要测试什么测试块，断言和匹配器如何实现测试块如何实现断言和匹配器CLI 和配置...
使用Jest测试JavaScript (入门篇)
木贝西的博客
02-16 1085
1 什么是 Jest? Jest Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。并且它对同样是 Facebook 的开源前端框架 React 的测试十分友好。 2 安装Jest 2.1 初始化package.json 在shell中输入以下命令，初始化前端项目并生成package.json： npm init -y 2.2 安装Jest及相关依赖 在s
vue-自动化测试框架JEST和CYRPESS
weixin_42855188的博客
07-25 1765
大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件…（1）根目录/src/component/ZTest/index.vue。（2）根目录/tests/unit/ZTest.spec.js。强迫开发者编写更容易被测试的代码，提高代码质量。编写的测试有文档的作用，方便维护。不方便迭代，代码重构困难。........
package.json 最全详解
热门推荐
qq_34703156的博客
11-18 4万+
今天来看看前端的大管家 package.json 文件相关的配置，充分了解这些配置有助于我们提高开发的效率，规范我们的项目。文章内容较多，建议先收藏在学习！ 在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package.json 作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。 当我们搭..
jest-html-reporter:Jest测试结果处理器，用于以HTML格式生成摘要
05-02
受到启发安装$ yarn add jest-html-reporter --dev用法通过将以下条目添加到Jest配置（jest.config.json）中，将Jest配置为处理测试结果： " reporters " : [" default " ,[ " ./node_modules/jest-...
jest测试html2text,前端测试之Jest深入浅出
weixin_31105189的博客
06-16 680
1. 为什么要做前端测试首先，我认为前端测试并不是所有项目都必须的，因为写测试代码是需要要花费一定时间的，当项目比较简单的时候，花时间写测试代码可能反而会影响开发效率，但是需要指出的是，我们前端开发过程中，编写测试代码，有以下这些好处：更快的发现bug，让绝大多数bug在开发阶段发现解决，提高产品质量比起写注释，单元测试可能是更好的选择，通过运行测试代码，观察输入和输出，有时会比注释更能让别人理解...
深入浅出 Jest 框架的实现原理
Wscats
07-17 807
English Version | 中文版 深入浅出 Jest 框架的实现原理 https://github.com/Wscats/jest-tutorial 什么是 Jest Jest 是 Facebook 开发的 Javascript 测试框架，用于创建、运行和编写测试的 JavaScript 库。 Jest 作为 NPM 包发布，可以安装并运行在任何 JavaScript 项目中。Jest 是目前前端最流行的测试库之一。 测试意味着什么 在技 ​​ 术术语中，测试意味着检查我们的代码是否满足某些期望。
Jest 组件库单元测试【基础语法篇】
Dreamy_LIN的博客
01-16 1万+
一、介绍 Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。 此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度。 二、简单尝试 Jest 启动一个项目： 安装 Jest 全局：npm install -g jest 或局部： npm install -D jest 在 package.json 中指定 test 脚本： Jest 的测试脚本名形如*.t
jest测试具体方法
小王的储物间
08-17 1379
1.捕获函数的调用和返回结果，以及this和调用顺序2.它可以让我们自由的设置返回结果3.改变函数的内部实现### 1、回调函数测试。请求测试的返回结果应该是后端自动化测试内容，所以可以使用jest mock模拟axios 请求不发送真实请求。t模式根据测试用例的名字匹配，只会执行匹配到的测试用例。p模式根据测试文件名匹配，只会执行匹配到的测试文件中的测试用例。被称作matcher。o 模式只会执行更改测试用例的文件。文件下的同名文件会自动替换为mock文件。f模式只会对之前没有通过的测试用例测试。...
JEST测试Vue2+elementui项目
web8_zhy的博客
10-17 1622
jest、单元测试、vue
vue2.x集成jest
青春正在燃烧的博客
01-06 744
vue2.x集成jest，步骤及问题解析
前端自动化测试jest教程9-TDD+单元测试，BDD+集成测试
Jsoning的博客
01-20 2439
准备条件 以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章 这节教程主要讲解TDD+单元测试，BDD+集成测试 什么是TDD？ Test Driven Development 测试驱动开发 顾名思义，就是我们先根据需求去写测试用例，根据测试用例再去写我们的功能。当我们增加或者修改某一项需求的时候，首先修改的是测试用例，根据测试用例再去修改代码逻辑...
前端测试框架jest
最新发布
10-10
1. 自动化配置：Jest提供了一种非常简便的方式来配置测试环境，无需手动设置。 2. 快速且并行运行：Jest使用优化算法来最大限度地减少测试运行时间，并且可以并行运行多个测试。 3. 丰富的断言库：Jest内置了丰富的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值