前端实现Jest单元测试

简介: 前端实现Jest单元测试

介绍


       最近在学一些关于工程化的内容,里面正好提到了jest单元测试,首先简单理解一下什么是单元测试,举个例子:


       小明同学偶然发现海海同学做的组件库不错,想学习一下,于是就拉了代码,不过在看代码的过程中发现有的代码有更优性能的方法,但是呢他自己也不确定性能是否更好,那这种情况怎么办呢,这时候就可以用到我们的单元测试了。


应用场景


       单元测试的应用场景只有上面这种情况吗?


       当然不止了,我们在项目开发中如何保证自己代码的准确性呢?


靠自己的经验吗?还是靠自己的手动测试呢?即便如此,如何保证手动测试的完整性呢?


       当然,单元测试不是必须的,毕竟不是还有我们的测试同学吗。


第一个单元测试


   接下来我们完成一个最简单的单元测试,首先还是先新建一个项目,使用 npm init 然后新建一个server.js文件


npm init 


c986da0e58a14b5890e6020eb7459866.png


接下来我们可以全局安装我们的jest


npm i jest -g

f3b18314d7204b64a19e41849ca0e617.png


首先在我们server里面写一段代码

const server =(a,b)=>a * b
module.exports=server


简单解释一下就是我们先新建一个函数serve 然后导出


如果说我们之前的方法进行测试的话,那我们就是这样


208ec387e1474cf894ff4b276e4f85da.png


1.单元测试


 首先我们可以先创建一个test文件夹,然后创建我们的server.test.js文件作为我们的测试文件

a6dd4e3f5aef44ddba7644eff9c15fbc.png


然后写我们的测试用例


首先我们引入我们需要测试的文件server


const server = require('../server')


然后就写我们的第一个测试用例describe


我们的describe第一部分是他的描述部分,因为我们的describe是我们的测试单元


693bf706d576478aa3eca0ec5bad5499.png


我们在测试单元下可以写入多个测试项,我们的第一个测试项(test)中第一部分跟上面describe一样,第一个相当于一个提示,第二个函数里面执行断言,断言的意思就是判断输出的内容是否正确,expect就是输出的内容,我们的toBe就是我们期待的结果,如果成立即代表测试用例通过


67758c65e5ac477099e7fb480d54629f.png


到这一步就可以进行测试


我们只需要在项目下输入jest运行即可


a33d0f09fdfd435abaffca1972faac43.png


这里可以来逐步分析,


Test Suites


首先我们的Test  Suites代表着有一个测试单元通过了,


Tests


代表着有两个测试项通过


到这里就代表我们的第一个单元测试完成了。



相关文章
|
1天前
|
JavaScript 前端开发 测试技术
jest测试核心
jest测试核心
16 2
|
1天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
11 0
|
1天前
|
前端开发 JavaScript Java
java测试链接超时返回前端
java测试链接超时返回前端
18 0
|
1天前
|
前端开发 测试技术
前端自动化测试中的快照测试原理
快照测试用于前端自动化测试,通过比较当前应用状态与预存预期快照来检测UI变化。流程包括设置测试环境、捕获屏幕快照、保存预期快照、比较快照及处理差异。当快照比较出现差异时,测试工程师审查判断是否为预期变化或错误,确保应用一致性。这种方法在重构、样式更改和跨浏览器测试时提供有效回归测试,减少手动验证工作。
|
1天前
|
数据采集 监控 前端开发
前端自动化测试
前端自动化测试通过脚本和工具提升开发效率,确保应用在不同环境的品质和一致性。关键方面包括单元测试(如Jest、Mocha)、集成测试(Selenium、Puppeteer)、UI测试、快照测试及持续集成工具(Jenkins、Travis CI)。遵循确定测试范围、编写可维护代码、频繁运行测试和监控结果的最佳实践,可增强代码质量,减少错误。
|
1天前
|
JavaScript 安全 编译器
【TypeScript 技术专栏】TypeScript 与 Jest 测试框架
【4月更文挑战第30天】本文探讨了TypeScript与Jest测试框架的结合在确保代码质量和稳定性上的重要性。Jest以其易用性、内置断言库、快照测试和代码覆盖率分析等特点,为TypeScript提供全面的测试支持。两者结合能实现类型安全的测试,提高开发效率,并涵盖各种测试场景,包括异步操作。通过实际案例分析,展示了如何有效利用这两个工具提升测试质量和开发效率,为项目成功奠定基础。
|
1天前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
|
1天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
1天前
|
JavaScript 前端开发 测试技术
Jest测试核心
Jest测试核心
11 0
|
1天前
|
Web App开发 前端开发 JavaScript
Web前端性能测试方法
Web前端性能测试方法

热门文章

最新文章