随笔分类 - Unit Testing
摘要:Limitations of Mocking the Store In the last lesson, we successfully mounted our EventList component and provided initial state to our Vuex store. Whi
阅读全文
摘要:手写简易版测试框架 本小节,我将带着大家一些手写一个简易版的测试框架,部分模块为了方便,我们会直接使用 Jest 所提供的模块,通过手写简易版的测试框架,大家能够体会到一个测试框架是如何搭建起来的。 整个书写过程我们会分为如下 3 步骤: 获取所有测试文件 并行的运行测试代码 添加断言 获取所有测试
阅读全文
摘要:我们这里要测试的项目,是之前 React 篇章中开发的 coderstation 服务器: 服务器框架:Express 数据库:MongoDB 这里我们针对 Express 服务器端应用进行测试,主要是测试该应用所提供的端口是否能够正常的工作,会连接真实的数据库,这里实际上是属于一个集成测试。 这里
阅读全文
摘要:在通过 vuecli 创建 vue 项目的时候,我们可以很轻松的将 jest 测试框架集成进去。 之前我们在介绍测试 React 组件的时候,介绍了 testing library 这个扩展库,这个 testing library 是一个通用库,因此这个扩展库可以用于 vue、angular...
阅读全文
摘要:在对组件进行测试的时候,往往需要从两个方面进行测试: 交互:确保组件在进行交互时功能正常 渲染:确保组件渲染输出正确(比如不会多一个或者少一个 DOM 元素) 针对渲染方面的测试,我们就可以使用快照来进行测试。 所谓快照,就是给渲染出来的 DOM 元素拍一张“照片”(将最终渲染出来的 DOM 以字符
阅读全文
摘要:在进行 React 开发的时候,还有一个非常重要的功能模块,那就是 Hook,自定义 Hook 作为一块公共逻辑的抽离,也会像组件一样被用到多个地方,因此对 Hook 的测试也是非常有必要的。 Hook 没有办法像普通函数一样直接进行测试,因为在 React 中规中,Hook 必须要在组件里面使用,
阅读全文
摘要:在现代前端开发中,组件是一个重要的模块,一个组件拥有完整的功能,能够对我们的代码进行最大程度的复用。 因此在进行单元测试的时候,往往也需要对重要的组件进行测试。 这一节课我们先聚焦在 React 上面,看一下 React 的组件如何进行测试。 Testing library 这是专门用来做测试的一个
阅读全文
摘要:这一小节,我们来做一个综合的练习,该练习会整合: typescript webpack jest 准备工作 首先创建项目目录,通过 npm init -y 进行初始化。 整个项目我们打算使用 typescript 进行开发,因此需要安装 typescript npm i typescript -D
阅读全文
摘要:我们知道,在 ES6 中所提供的 class 本质上是一个语法糖,背后实际上是一个构造函数,因此在对类进行测试的时候,也可以使用 jest.mock 或者 jest.spyOn 来进行模拟测试。 经常我们会遇到这种情况:在测试一个模块的时候,这个模块依赖了其他的类,那么这个时候为了屏蔽其影响,我们需
阅读全文
摘要:这一小节我们的目标是学习 Jest 针对在浏览器环境下面的代码,特别是使用到了浏览器 Api 的代码,如何进行测试。 示例一 示例一:有一个输入框,用户在输入框中输入内容,该内容会被存储到 localstorage 里面。localstorage 就是浏览器环境下面特有的 Api <body> <p
阅读全文
摘要:整合 TypeScript 准备工作 首先我们需要有一个基于 ts 的项目。 第一步通过 npm init -y 初始化项目 接下来通过: npm install typescript 局部安装 typescript。 之后还需要生成 typescript 的配置文件,通过命令: npx tsc -
阅读全文
摘要:模拟函数 在 Jest 中提供了一个全局对象名为 jest,这个对象上面有非常多的方法,有关该对象的方法,可以参阅文档: https://jestjs.io/docs/jest-object jest 对象上面的方法大致分为四类: 模拟模块 模拟函数 模拟计时器 其他方法 通过 jest.fn 方法
阅读全文
摘要:前端自动化测试 这一小节主要会介绍: 单元测试对于我们前端的重要性 软件开发模型与自动化测试 前端测试框架 单元测试 不同的测试这里会形成一个测试金字塔: 一般来讲,软件开发中单元测试是做的最多的。 从测试金字塔的角度来看,越往上测试的成本是逐渐增加的,因为越到后期才抛出的 Bug,程序员要修复这个
阅读全文
摘要:测试基本认知 这节课我们会从以下几个点来介绍和测试相关的基本知识: 为什么需要测试 ? 有哪些测试 ? TDD和BDD项目驱动模式 为什么需要测试 测试保证了软件的质量和可靠性,确保我们的软件是按照预期的功能进行的。 发现和修复权限 通过测试,我们可以提前发现一些功能不完整、性能低下、有安全漏洞的地
阅读全文
摘要:In this lesson, we will be learning how to mock REST API calls. Mocking is a technique used in software testing to simulate the behavior of objects or
阅读全文
摘要:Snapshots In this lesson, we will learn about a testing technique called Snapshot testing. Snapshot testing allows you to take a “snapshot” of the exp
阅读全文
摘要:Building our component To focus on testing, I’ve already built our component. You can copy the code for the component below or from the GitHub reposit
阅读全文
摘要:Sometimes, you might need to wait for an element to disappear from your UI before proceeding with your test setup or making your assertion. In this le
阅读全文
摘要:Querying is difficult! Even if we follow the guiding principles and always start from the queries accessible to everyone, we are bound to get stuck so
阅读全文
摘要:Given how web pages are built nowadays, you might find yourself with multiple instances of the same element. To avoid querying for a list of elements
阅读全文