Zhentiw - 博客园

2025年1月29日

摘要：在通过 vuecli 创建 vue 项目的时候，我们可以很轻松的将 jest 测试框架集成进去。之前我们在介绍测试 React 组件的时候，介绍了 testing library 这个扩展库，这个 testing library 是一个通用库，因此这个扩展库可以用于 vue、angular... 阅读全文

posted @ 2025-01-29 18:24 Zhentiw 阅读(92) 评论(0) 推荐(0)

[Jest] 测试快照

摘要：在对组件进行测试的时候，往往需要从两个方面进行测试：交互：确保组件在进行交互时功能正常渲染：确保组件渲染输出正确（比如不会多一个或者少一个 DOM 元素）针对渲染方面的测试，我们就可以使用快照来进行测试。所谓快照，就是给渲染出来的 DOM 元素拍一张“照片”（将最终渲染出来的 DOM 以字符阅读全文

posted @ 2025-01-29 17:48 Zhentiw 阅读(57) 评论(0) 推荐(0)

[React Jest] 测试 Hook

摘要：在进行 React 开发的时候，还有一个非常重要的功能模块，那就是 Hook，自定义 Hook 作为一块公共逻辑的抽离，也会像组件一样被用到多个地方，因此对 Hook 的测试也是非常有必要的。 Hook 没有办法像普通函数一样直接进行测试，因为在 React 中规中，Hook 必须要在组件里面使用，阅读全文

posted @ 2025-01-29 17:33 Zhentiw 阅读(69) 评论(0) 推荐(0)

2025年1月28日

[React Jest] 测试React组件 (运用MSW）

摘要：在现代前端开发中，组件是一个重要的模块，一个组件拥有完整的功能，能够对我们的代码进行最大程度的复用。因此在进行单元测试的时候，往往也需要对重要的组件进行测试。这一节课我们先聚焦在 React 上面，看一下 React 的组件如何进行测试。 Testing library 这是专门用来做测试的一个阅读全文

posted @ 2025-01-28 12:46 Zhentiw 阅读(159) 评论(0) 推荐(0)

2025年1月27日

[Jest] 整合 webpack 综合练习

摘要：这一小节，我们来做一个综合的练习，该练习会整合： typescript webpack jest 准备工作首先创建项目目录，通过 npm init -y 进行初始化。整个项目我们打算使用 typescript 进行开发，因此需要安装 typescript npm i typescript -D 阅读全文

posted @ 2025-01-27 20:59 Zhentiw 阅读(43) 评论(0) 推荐(0)

[Jest] 模拟 ES6 类

摘要：我们知道，在 ES6 中所提供的 class 本质上是一个语法糖，背后实际上是一个构造函数，因此在对类进行测试的时候，也可以使用 jest.mock 或者 jest.spyOn 来进行模拟测试。经常我们会遇到这种情况：在测试一个模块的时候，这个模块依赖了其他的类，那么这个时候为了屏蔽其影响，我们需阅读全文

posted @ 2025-01-27 20:34 Zhentiw 阅读(26) 评论(0) 推荐(0)

2025年1月26日

[Jest] 浏览器环境下的测试

摘要：这一小节我们的目标是学习 Jest 针对在浏览器环境下面的代码，特别是使用到了浏览器 Api 的代码，如何进行测试。示例一示例一：有一个输入框，用户在输入框中输入内容，该内容会被存储到 localstorage 里面。localstorage 就是浏览器环境下面特有的 Api <body> <p 阅读全文

posted @ 2025-01-26 11:23 Zhentiw 阅读(77) 评论(0) 推荐(0)

2025年1月25日

[Sass] 预处理器介绍

摘要：预处理器介绍预处理器基本介绍 Sass 快速入门预处理器基本介绍平时在工作的时候，经常会面临这样的情况：需要书写很多的样式代码，特别是面对比较大的项目的时候，代码量会急剧提升，普通的CSS书写方式不方便维护以及扩展还有复用。通过 CSS 预处理技术就可以解决上述的问题。基于预处理技术的语言，阅读全文

posted @ 2025-01-25 19:09 Zhentiw 阅读(53) 评论(0) 推荐(0)

[Jest] 整合Typescript

摘要：整合 TypeScript 准备工作首先我们需要有一个基于 ts 的项目。第一步通过 npm init -y 初始化项目接下来通过： npm install typescript 局部安装 typescript。之后还需要生成 typescript 的配置文件，通过命令： npx tsc - 阅读全文

posted @ 2025-01-25 18:45 Zhentiw 阅读(62) 评论(0) 推荐(0)

2025年1月24日

[Jest] Mocking module, file and function

摘要：模拟函数在 Jest 中提供了一个全局对象名为 jest，这个对象上面有非常多的方法，有关该对象的方法，可以参阅文档： https://jestjs.io/docs/jest-object jest 对象上面的方法大致分为四类：模拟模块模拟函数模拟计时器其他方法通过 jest.fn 方法阅读全文

posted @ 2025-01-24 16:51 Zhentiw 阅读(59) 评论(0) 推荐(0)

Answer1215

公告