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

最新推荐文章于 2024-06-19 08:22:09 发布
最新推荐文章于 2024-06-19 08:22:09 发布
阅读量1.1k 收藏 7
点赞数 2
分类专栏： 测试 文章标签： vue.js javascript 单元测试 前端 firebug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jsoning/article/details/103878945
版权
本文是关于前端自动化测试框架Jest的教程，介绍了为什么选择Jest，如其零配置、速度快、快照功能等优势。接着详细阐述了Jest的基本安装配置过程，包括创建项目、安装Jest、编写测试代码，并通过Babel让Jest支持ES6模块导入导出。文章适合想要学习Jest的前端开发者，后续会继续讲解Jest的匹配器和其他相关知识。
摘要由CSDN通过智能技术生成

前言

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

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

为什么选择jest？

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

基本安装配置

  1. 创建demo文件夹
  2. 进入文件夹中运行npm init 初始化一个package.json文件
  3. 安装jest npm install --save-dev jest
  4. 在demo文件夹中新建两个文件index.js index.test.
最低0.47元/天 解锁文章
前端秀儿
关注
专栏目录
前端自动化测试jest教程10-vue实战
Jsoning的博客
02-05 1324
这是jest教程的最后一篇文章了，也算对自己所学知识的回顾吧！ vue项目实战git地址：https://github.com/foreverhot/jest-document 在实际项目中运用jest所具备知识点 jest （测试框架） 匹配器matchers https://blog.csdn.net/Jsoning/article/details/103898385 钩子函数 htt...
vue-cli3 新建的项目jest 运行报错
hello，是翠花呀
04-30 1095
问题描述： npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test@1.0.0 unit: `jest --config test/unit/jest.conf.js --coverage` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the test@1.0.0 unit scri...
Jest(优点和安装方法)
qq_44842962的博客
02-16 845
1、安装jest yarn add --dev jest 或 npm install --save-dev jest 2、在项目中使用 2.1 安装成功后，在package.json中设置 { "scripts": { "test": "jest" } } 2.2 创建sum.js文件 function sum(a, b) { return a + b; } module.exports = sum; 2.3 创建测试文件 sum.test.js const sum = requ
Jest测试框架全方位指南：从安装，preset、transform、testMatch等jest.config.js配置，多模式测试命令到测试目录规划等最佳实践
最新发布
JINGWHALE
06-19 1132
本文以Vue 项目为蓝本，详细介绍了Jest的安装，jest.config.js preset、transform、moduleNameMapper、testMatch、coverageThreshold、collectCoverage等主要配置，单个测试文件、整个目录或模式匹配、分类与筛选测试、并行运行与观察模式、代码覆盖率报告等主要测试命令，项目测试目录规划等Jest最佳实践。
java界面ui自动化_基于Selenium2+Java的UI自动化(2) - 启动浏览器
weixin_39866974的博客
02-26 277
一、准备工作我们常用的浏览器主要有三个：chrome、Firefox、IE；其中chrome 和 IE 需要下载驱动程序，才能启动浏览器，注意驱动程序有32位和64位两种。另外：如何查看本机的浏览器版本；(1)IE：查看安装路径，如果是安装在Program Files (x86)中，表示32位、如果安装在Program Files 中，表示64位；(2)Chrome：在谷歌浏览器地址栏输入：chr...
package.json 知多少？
Yvette Lau的专栏
12-11 342
在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块必...
前端自动化测试jest教程3-命令行工具
Jsoning的博客
01-13 687
准备条件 以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章 这节教程主要讲解jest中的中的一些命令行工具，将第1节的代码复制一份，并运行npm run test 效果图： 先把这几个提示的命令，讲解一下 这里几个命令大家自己一定要动手试一下，才能够增加印象 着重讲一下 o 这个命令，需要配个git使用，必须将项目提交到本地仓库中（实际开发...
前端开源库-jest-glamor-react
08-30
总结起来，`jest-glamor-react`是前端开发的一个强大工具，它将Jest的测试能力、Glamor的CSS-in-JS优势和React的组件化思想无缝融合，为开发者提供了更高效、更便捷的开发体验。理解并掌握这些技术，对于提升前端...
前端自动化测试入门教程（puppeteer+jest+allure）
maggie_1212的博客
07-14 3562
前端自动化测试入门教程 该教程将简单快速的帮你理解和入门（puppeteer+jest+allure）e2e测试。 一、准备 1.下载安装所需要的工具和软件： （1）node.js 安装教程 （2）VSCode 点击下载 （3）Chrome 点击下载 补充： VSCode设置简体中文，见百度经验。 2.建立初始项目 （1）新建一个空的文件夹，名字随意，这里我们用AutoTest。 （2）在VSCode中打开新建的文件夹，右键文件夹>在终端中打开。 （3）在终端中输入以下命令回车，如果没有需要
单元测试（jest）：理解、安装、使用
snowball的博客
11-16 4696
2.1、Jest：Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。终究会暴露，越早越好。从团队的角度讲，开发人员的代码经过完整的单元测试，可以有效的减少测试成本，维护成本，运维成本，运营成本。从技术的角度讲，有效的提高代码的健壮性，有效的增加代码的可维护性，对于后期的代码重构是必要条件。解：我理解，我项目是vite项目，不是vue-cli项目，不能使用这个命令安装jest。
jest-babel:用于Jest的简单Babel预处理程序
05-02
用于Jest的简单Babel预处理程序 用法 安装软件包： $ npm install jest-babel --save-dev 将预处理器添加到您的package.json ： { " scripts " : { " test " : " jest " }, " jest " : { " scriptPreprocessor " : " <rootDir>/node_modules/jest-babel " , " preprocessorIgnorePatterns " : [ " /node_modules/ " ], " testFileExtensions " : [ " es6 " , " js " ], " moduleFileExtensions " : [ " js " , " json " , " es6 " ]
vue-自动化测试框架JEST和CYRPESS
weixin_42855188的博客
07-25 1856
大部分企业为了追求开发效率，所以并没有去强制要求员工写前端自动化测试的代码。将已测试过的单元测试函数进行组合集成暴露出的高层函数或类的封装，对这些函数或类进行的测试。单元测试是指对程序中最小可测试单元进行的测试，例如测试一个函数、一个模块、一个组件…（1）根目录/src/component/ZTest/index.vue。（2）根目录/tests/unit/ZTest.spec.js。强迫开发者编写更容易被测试的代码，提高代码质量。编写的测试有文档的作用，方便维护。不方便迭代，代码重构困难。........
深入浅出 Jest 框架的实现原理
Wscats
07-17 933
English Version | 中文版 深入浅出 Jest 框架的实现原理 https://github.com/Wscats/jest-tutorial 什么是 Jest Jest 是 Facebook 开发的 Javascript 测试框架，用于创建、运行和编写测试的 JavaScript 库。 Jest 作为 NPM 包发布，可以安装并运行在任何 JavaScript 项目中。Jest 是目前前端最流行的测试库之一。 测试意味着什么 在技 ​​ 术术语中，测试意味着检查我们的代码是否满足某些期望。
Jest 进行前端单元测试
WdbM_的博客
09-28 1934
Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库，配置使用相当简单，十分推荐，文章对 Jest 进行了初步的使用
Jest测试框架知识点总结
小小喵的博客
07-09 6186
jest 是 facebook 推出的一款测试框架。 JEST 官方文档：https://jestjs.io/docs/en/getting-started 需要连接外网。 一、Getting Started 开始安装： yarn add --dev jest or npm: npm install --save-dev jest 提示：Jest 支持 yarn 的命令，但是 npm 也能工作。你可以比较 yarn 和 npm 在 yarn 命令文档里https://yarnpkg.com/en/.
Jest 学习入门
polmJ
07-16 633
jest 学习入门 /* 2019.07.15 夏 晴*/ 今天开始正式接触Jest，从前也许听说过，但从来没有了解过。 今天很高兴有机会可以进入Jest世界，准备边学边记录学习过程，以便自己之后的回顾以及希望来看我博客的人可以更容易的学习Jest。 什么是Jest Jest is a delightful JavaScript Testing Framework with a focus o...
全栈测试实战：用Jest测试Vue+Koa全栈应用
weixin_33748818的博客
11-16 724
本文首发于我的博客，欢迎踩点~ 前言今年一月份的时候我写了一个Vue+Koa的全栈应用，以及相应的配套教程，得到了很多的好评。同时我也在和读者交流的过程中不断认识到不足和缺点，于是也对此进行了不断的更新和完善。本次带来的完善是加入和完整的前后端测试。相信对于很多学习前端的朋友来说，测试这个东西似乎是个熟悉的陌生人。你听过，但是你未必做过。如果你对前端（以及nodejs端）测试很熟悉，那么本文的帮助...
package.json详解
weixin_39407291的博客
03-27 5929
建议转到 https://www.cnblogs.com/datiangou/p/10172994.html 效果更好，这篇博客做个记录。 在前端开发中，npm已经是必不可少的工具了。使用npm，不可避免的就要和package.json打交道。平时package.json用得挺多，但是没有认真看过官方文档。本文结合npm官方文档以及自己平时使用过程中的感悟，谈一谈package.json。官方文...
前端测试框架jest
10-10
Jest是一个流行的前端测试框架，用于编写、运行和管理JavaScript代码的测试。它具有简单易用的API和丰富的功能，适用于各种前端项目的单元测试、集成测试和端到端测试。 Jest具有以下特点： 1. 自动化配置：Jest提供了一种非常简便的方式来配置测试环境，无需手动设置。 2. 快速且并行运行：Jest使用优化算法来最大限度地减少测试运行时间，并且可以并行运行多个测试。 3. 丰富的断言库：Jest内置了丰富的断言库，方便进行各种判断和期望结果的验证。 4. 快照测试：Jest支持快照测试，可以轻松地比较组件渲染的结果与预期快照是否一致。 5. Mock函数：Jest提供了强大的mock功能，可以轻松模拟外部依赖，方便编写可靠的单元测试。 6. 完善的生态系统：Jest有广泛的社区支持，配套了大量的插件和工具，可以满足各种测试需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值