21 | 单元测试：如何使用 TDD 开发一个组件？

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。
上一讲我们学习了不少组件库里的经典组件，用 TypeScript 搭建起了 TypeScript + Vite + Sass 的组件库开发基础环境，并且实现了 Container 布局组件。
今天我们来聊另外一个大幅提升组件库代码可维护性的手段：单元测试。在理解单元测试来龙去脉的基础上，我还会给你演示，如何使用测试驱动开发的方式实现一个组件，也就是社区里很火的 TDD 开发模式。
单元测试单元测试（Unit Testing），是指对软件中的最小可测试单元进行检查和验证，这是百度百科对单元测试的定义。而我的理解是，在我们日常代码开发中，会经常写 Console 来确认代码执行效果是否符合预期，这其实就算是测试的雏形了，我们把代码中的某个函数或者功能，传入参数后，校验输出是否符合预期。
下面的代码中我们实现了一个简单的 add 函数,  并且使用打印 3 和 add(1,2) 的结果来判断函数输出。
add 函数虽然看起来很简单，但实际使用时可能会遇到很多情况。比如说 x 如果是字符串，或者对象等数据类型的时候，add 结果是否还可以符合预期？而且 add 函数还有可能被你的同事不小心加了其他逻辑，这都会干扰 add 函数的行为。
function add(x,y){
  return x+y
}
console.log(3 == add(1,2))

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文介绍了如何使用测试驱动开发（TDD）的方式来进行组件开发，并详细讲解了单元测试的概念和实践方法。作者通过示例演示了如何使用Jest测试Vue3组件的渲染和行为。文章还介绍了如何配置Jest和编写测试用例，以及如何使用断言函数来判断值是否相等，以及如何判断函数是否执行。通过实例和步骤指导，读者可以快速了解TDD开发模式和单元测试的基本原理和实践方法。文章还涉及了使用Sass修改按钮样式、全局配置按钮大小和颜色、测试覆盖率等内容。通过TDD开发模式，作者强调了测试代码的重要性，以及如何通过测试驱动开发来提高代码的可维护性。整体而言，本文内容涵盖了自动化测试、Jest配置、TDD开发模式以及Vue组件测试等方面，为读者提供了全面的技术指导和实践经验。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(19)

最新
精选

陈坚泓
置顶
工作三年至今还没有机会用上单元测试
2022-05-06
1
20
小海
赞, 发现两个小瑕疵 1.在 Button.spec.ts文件中引入 button.vue组件时.会提示找不到该模块,后来看了github链接的源码才发现是需要在src目录下增加 env.d.ts文件,才能使TS文件顺利引入vue文件的组件, 2. babel.config.js 在课程资料里是创建 .babel.config.js文件但是源码里并没有"." 不晓得哪个才是正确写法
作者回复: 其实ent.d.ts是vscode帮我自动创建了，我就给忽略了，就是babel.config.js
2021-12-08
5
3
下一个起跑点
还是那句话，等你写完单元测试，项目都上线了，测试还是留着空闲时再写吧
作者回复: 确实也是国内的很多项目现状，针对最核心的流程自己写一点把，也算是提升了
2021-12-19

2
小胖
接上一篇提问：上篇文章的几个布局组件，定义Props类型的时候。老师有时是使用type、有时用interface，有什么说法么？
作者回复: type和interface功能比较类似，大部分场景都可以互换，官网也给出了说明https://github.com/microsoft/TypeScript/blob/main/doc/spec-ARCHIVED.md#310-type-aliases However, doing so means the following capabilities are lost: An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot. An interface can have multiple merged declarations, but a type alias for an object type literal cannot. 大概就是type可以使用别名和typeof，多个interface可以合并，但是type不会，这些区别大部分日常开发都见不到，可以理解为interface更倾向于描述类型关系，type更适合描述数据结构
2021-12-09
3
1
小甜酒
➜ ailemente git:(main) ✗ node add.js 测试数字相加测试通过这个运行报错是需要安装什么嘛
作者回复: 报错信息方便发出来吗？node add.js应该不需要安装
2022-01-14


于三妮
直到现在还没用过自动化测试呢~~
作者回复: 可以尝试一下新的开发模式也可以提高代码质量
2021-12-09


南山
传入的circle属性，生成.btn--circle的classname，实现圆角样式
作者回复: 赞
2021-12-08


Geek_623ed8
记录一下报错： ReferenceError: module is not defined in ES module scope 找到package.json里的"type": "module" 去掉
2022-09-02归属地：黑龙江

7
海阔天空
感觉单元测试这块用得比较少，还是用console检查用得比较多，这可能和项目的迭代周期有关。单元测试确实比较更全面。
2021-12-08

2
刷子iNG
这讲，对自己写个ui库提升kpi很有帮助啊
2022-02-15

1

收起评论