jest 前端自动化测试配置和学习笔记

最新推荐文章于 2024-04-19 03:30:47 发布
最新推荐文章于 2024-04-19 03:30:47 发布
阅读量375 收藏
点赞数
分类专栏： 测试 文章标签： javascript unittest
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vinc_chen/article/details/109519153
版权
本文介绍了jest作为前端自动化测试工具的优势，如简单API、多项目支持和速度。讲解了jest的配置，包括环境配置和在WebStorm中的设置。接着，文章深入探讨了jest的基础，如简单的测试用例、常用匹配器、异步测试和钩子函数的使用。此外，还提到了如何使用describe进行测试用例分组，并提供了相关资源链接以便进一步学习。
摘要由CSDN通过智能技术生成

jest 前端自动化测试学习笔记

jest 解决的问题

  • API简单
  • 多项目运行
  • 速度快
  • IDE 整合友好

jest 配置

环境配置

  1. 在项目根目录使用npm初始化项目

    npm init

  2. 使用npm安装jest包

    npm install jest@24.8.0 /*版本号为24.8.0 的jest包*/

  3. 修改package.json文件中test命令为jest

    test: "Error: no test specified" && exit 1" 替换为"test: jest"

WebStorm 配置 jest

依次点击Preferences=>Languages & Frameworks=>JavaScript(务必点击侧边栏展开三角形按钮)=>Libraries=>DownLoad…（在界面右侧边栏）=>在弹出的Download Library中查找jest包=>单击选中高亮后点击DOWNLOAD AND INSTALL安装。

最后安装jest成功后的界面：

image-20201105195014814

jest 基础

简单测试

// 文件: hello-world.js
function hello
最低0.47元/天 解锁文章
陈Wenwenwu
关注
专栏目录
前端自动化测试jest教程4-异步代码测试
Jsoning的博客
01-15 874
准备条件 以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章 这节教程主要讲解在jest中怎样去测试异步代码，将第1节的代码复制一份，并且把index.js和index.test.js文件内容全部清空 在实际开发中，肯定会用到异步请求，请求后台的接口数据，这里我们就使用axios 来请求数据 npm install axios --save 安装...
前端自动化测试 —— Jest 测试框架应用
最新发布
nhb687096的博客
05-20 815
在软件测试中，自动化测试指的是使用独立于待测软件的其他软件来自动执行测试、比较实际结果与预期并生成测试报告这一过程。在测试流程已经确定后，测试自动化可以自动执行的一些重复但必要的测试工作。也可以完成手动测试几乎不可能完成的测试。对于持续交付和持续集成的开发方式而言，测试自动化是至关重要的。——来自 WiKi 百科。
（2.2w字）前端单元测试之Jest详解篇
qq_44997147的博客
02-17 3371
getBy...函数用于当确定元素存在时。如果元素不存在，测试将失败。queryBy...函数用于当元素可能不存在，需要处理这种情况时。findBy...函数用于处理异步逻辑，当需要等待元素出现时。函数用于处理有多个匹配元素的情况。// findByText参数必须是完整的文本，如果是子字符串，需要加上{exact: false}// findByText不管前缀是screen还是container都可以成功describe('测试输入框的校验规则', () => {
在 WebStorm 中使用 Jest 进行测试
dearyang
07-02 2144
Facebook 开发的测试平台 Jest 每天都变得越来越流行，尤其是用于测试 React 应用程序。 Jest 快速、易于上手，并且具有许多开箱即用的功能（例如快照测试和测试覆盖率）。 在 WebStorm 中，我们希望简化整个测试工作流程，并使使用 Jest 编写、运行和调试测试更加顺畅和轻松。 让我们看看 WebStorm 如何帮助您使用 Jest 测试您的应用程序。 例如，我们将使用使用 Jest 和 Enzyme 的 react-dropzon...
前端自动化测试框架Jest中的Mock_jest 处理refs的mock(1)
2401_84263208的博客
04-19 510
为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们 如果需要可以自行免费领取 【保证100%免费】
前端Jest测试学习笔记
qq_39998226的博客
11-23 953
Jest中对dom节点操作的测试 解决jest jQuery requires a window with a document var jsdom = require('jsdom'); const $ = require('jquery')(new jsdom.JSDOM().window); // jq.js var jsdom = require('jsdom'); export const $ = require('jquery')(new jsdom.JSDOM().window);
VUE进阶 笔记贰章 前端工程化
12-30
总的来说，Vue进阶笔记的第二章前端工程化涵盖了前端开发中的多个重要方面，从构建工具到测试，再到自动化流程和性能优化，这些都是提升开发效率、保证代码质量和简化部署的关键技术。学习并掌握这些知识，对于成为...
Jest学习笔记
AFeng521web
10-04 533
一.是什么？ Jest是Facebook开源的一个前端测试框架，自动集成了断言、JSdom、覆盖率报告等，内部也是使用了jasmine作为基础，在其上进行了封装。主要用于React和React Native的单元测试，已被集成在create-react-app中。 二.特点 速度快：支持并行执行，Jest 为每一个单元测试文件创造一个独立的运行环境。Jest 可以启动多个进程同时运行不同的文件，...
web前端好帮手 - Jest单元测试工具
cpythonsz的博客
06-13 831
本文介绍如何使用Jest覆盖Web前端单元测试、如何统计测试覆盖率，Jest对比Mocha等内容。 Jest是什么？ Jest是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。 正如官方介绍所说，Jest是一款开箱即用的测试框架，其中包含了Expect断言接口、Mock接口、Snapshot快照、测试覆盖率统计等等全套测试功能。 为什么不推荐Mocha？ 不支持原生并行测试 断言库要另外安装 测试覆盖率统计功能要另外安装 原生输入的测试报告可读性很差，格式化也要另外安装 不支持snapsh
7种前端自动化测试框架，到底谁是No.1
ITstudy001的博客
03-23 1193
7种前端自动化测试框架，到底谁是No.1 互联网时代，我们对web前端进行测试，不应该只关注其功能是否实现，还有其它更多的测试内容，如样式是否符合预期、交互是否流畅、应用是否安全等各个方面。 前端自动化测已经成为web自动化测试中的终极目标和追求，但目前市场上层出不穷的前端测试框架，往往让人眼花缭乱。下面说一说，前端自动化测试框架的对比，以及初阶选择推荐。 框架对比 前端自动化的流派主要分为3类：基于录制回放技术的自动化测试框架，基于对文档对象模型 (DOM）对象进行解析的自动化测试框架，以及基于图像识别的
NPM详解
qq_43742385的博客
07-02 8909
NPM详解介绍命令执行多个脚本pre & post错误静默消息日志等级从文件中引用路径访问环境变量传递参数命名规则前缀 在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。 甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？ 你知道如何传递一个参数给脚本？ 你知道如何执行某个脚本文件么？ 在这篇文章中，我将分享我如何充分利用 NPM 脚本。 介绍 NPM 脚本是 package.json 中定义的一组
Web开发权威指南笔记（三）
weixin_45916384的博客
02-01 5584
Web开发权威指南笔记（三）Chattrbox项目练习以及代码
杂记
vip.khan的博客
11-01 2561
cnpm start //打包 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack",//设置打包命令 "server": "webpack-dev-server"//设置开启服务器命令 }, cnpm run server //...
你要知道的 Npm Script 都在这里
Beidan_ever的博客
05-16 1614
在拿到一个项目之后，如何看入口文件，如何运行项目，我们都会找到 package.json 中的 script 。 甚至在做项目做久之后，我们会自己写一些脚本来给开发提效，但你知道 NPM 脚本能做什么吗？ 你知道如何传递一个参数给脚本？ 你知道如何执行某个脚本文件么？ 在这篇文章中，我将分享我如何充分利用 NPM 脚本。 ## 介绍 NPM 脚本是 package.json 中定义的一组内置脚本和自定义脚本。他们的目标是提供一种简单的方法来执行重复的任务，比如： - 启动项目 - 打包项目 - 执行单元
一杯茶的时间，上手 Express 框架开发
图雀社区
12-18 5157
Node.js 已经成为 Web 后台开发圈一股不容忽视的力量，凭借其良好的异步性能、丰富的 npm 库以及 JavaScript 语言方面的优势，已经成为了很多大公司开发其后台架构的重要技术之一，而 Express 框架则是其中知名度最高、也是最受欢迎的后端开发框架。在这篇教程中，你将了解 Express 在 Node 内置 http 模块的基础上做了怎样的封装，并掌握路由和中间件这两个关键概念...
入门前端自动化测试-jest-基础
lin_fightin的博客
02-15 5400
jest基础 jest官网 匹配器 命令行工具 测试异步 钩子函数 mock 快照 dom 匹配器 jest默认环境是node 如果想在jest环境使用esmodule，需要借助@babel/core转化工具， @babel/preset-env指明如何转化 { "presets": [ [ "@babel/preset-env", { "targets": {
（VueJS）Webpack
黑胡子大叔的博客
03-12 235
什么是Webpack Webpack是一个Js的静态模块打包工具 模块 \ 模块化： 前端模块化方案：AMD、CMD、CommonJS、ES6 和grunt \ gulp的对比： grunt \ gulp的核心是Task； 配置一系列的task，并且定义task要处理的事物（例如ES6、ts转化、图片压缩、scss转成css） 之后让grunt \ gulp来一次执行这些task，并且让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值