使用Jest测试原生TypeScript项目

问题:我怎么才能收到你们公众号平台的推送文章呢?

最近写了一个wechat-colorpicker小项目。

主要是为了练习下TS。既然写了一个小库,我就想着顺便学下如何写测试吧,这是一件蛮有意思的事情。

从选型到搭建环境,前前后后用了近2个小时。不得不说一个合格的前端必然是一个合格的配置工程师。再次列举下,这个项目中所需要搭建配置的工具。

webpack.config 自动编译ts+css

tsconfig.config ts的配置文件

tslint.json tslint的配置文件

jest.config 配置jest

.babelrc jest解析js时还会需要用到的插件

circle.yml CircleCI 配置文件

如果大家有什么不懂的,自行百度。

Jest+TS入门

第一个问题,我项目都是TS写的,自然会有 import 这样的语法怎么办?

通过官网的Getting started 我们可以在最下方找到 ts-jest 不难理解,我们需要配的其实就是jest加载到什么样类型的文件,使用什么预处理来处理文件。

transform 就是专门用来匹配各种文件后缀,然后进行对应的预处理,你可以理解为webpack里的loader

我在TS中引入了.css文件咋办?同上

既然有transform,那我们任何文件都可以通过transform进行预处理了。

如果是js文件我通过babel-jest处理,css则使用jest-css-modules。假如没有这些配置,那import了你的库,库里有引入了高特性的js文件,或者css文件就会编译报错。

关于rootDir

在进行技术选型的过程中,我看了最新版本的vue-cli里推荐用哪些框架进行测试,一个是jest,还一个是krama+mocha。 我选择了jest,jest本身是fb出的,对于react非常友好。本身也做了许多环境上的封装切换jsdom环境或者node环境非常方便。我最后选择了这个。

刚刚开始看vue-cli里的jest配置我是拒绝的,第一个最显眼的关键字就是这种像XML得东西。但是你慢慢静下心来去理解就很容易了,其实就是一个basePath的感觉。我们可以看下文档怎么说 rootDir

我的目录如下

其实就代表根目录了

setupFiles 选项

不难发现,其实jest的生态还是很丰富的,我本次遇到的问题谷歌几个关键字很快都能解决。

UI Test 该怎么写?

test应该是像纯函数一样保证输入输出都是一样的,UI test一方面与Dom耦合,另一方面又用户交互耦合,那具体应该怎么写呢?

思路是:模拟用户操作,再通过Dom进行判断是否渲染正确。

比如这个实例化的测试,我们可以测试是否初始化是否正常,通过jquery来辅助判断

比如这个是点击【基本色】【更多颜色】我们会切换class,那就可以像这样

是不是突然就觉得非常简单了?并且是唯一性的,测试用例可靠性也有保障。之后我们就只需要配合一个CI,每次提交前跑一边我们的测试代码,所有用例测试成功即可pr,否则直接被拒绝。

写完了测试,给我们的jest.config 多加一行配置,来生成我们的测试报告(Jest内置了

istanbul)

javascript

module.exports = {

// ...

collectCoverage: true,

// ...

}

接着执行下查看测试结果如下:

% Stmts是语句覆盖率(statement coverage):是否每个语句都执行了?

% Branch分支覆盖率(branch coverage):是否每个if代码块都执行了?

% Funcs函数覆盖率(function coverage):是否每个函数都调用了?

% Lines行覆盖率(line coverage):是否每一行都执行了?

更多测试用例前往 >>>repo-wechat-colorpicker(https://github.com/MeCKodo/wechat-colorpicker/tree/master/__test__)

CricleCl(番外篇)

我们可以通过CI的工具来完善我们的wordflow,在这我选用了CricleCi。进入官网我们直接github登入后,setup 我们的项目。

然后根据它的推荐走,在我们项目根目录添加一个cricle.yml,复制黏贴它的推荐配置即可。

然后我们push测试一下,在这里我写错了我的文件路径,所以构建报错了。

重新修复了问题后,就可以正常运行工作了。

由于本文不是重点介绍CI,这里就不过多展开了,有兴趣的朋友可以自己摸索下。

总结

至此,你应该对前端UI测试应该大致有一个宏观的了解。

本文没有过多得介绍Jest的用法或者语法,希望可以给不知道如何做测试的朋友们一点方向,自己去尝试找到适合自己项目的才是最好的。

刚刚开始可能很难,无从下手,成本很大。实际上做起来,其实都是慢慢的套路,写熟练了后应该会上瘾,毕竟最后跑完测试的那感觉会让你十分高潮。

作者:二哲

关注我们

本文来自企鹅号 - web前端开发媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨建荣的学习笔记

你的备库做好准备了吗(r7笔记第78天)

这篇文章计划了一段时间,本来想写篇心情文字,还是留到周末再放飞心情吧。 今天的内容是关于数据库的备库的思考,当然我们可以自己问自己,我们的备库准备工作做好了吗?...

3777
来自专栏建站达人秀

如何部署 CDN 网络

内容分发网络(Content Delivery Network),是在现有 Internet 中增加的一层新的网络架构,由遍布全国的高性能加速节点构成。这些高性...

6K12
来自专栏JAVA高级架构

服务器应对大流量请求措施

硬件升级 硬件是基础,如果流量级别真的到大流量级别了,那么硬件基础肯定不能差。 负载均衡 根据某种负载策略把请求分发到集群中的每一台服务器上,让整个服务器群...

3677
来自专栏向治洪

android系统分层

  Android的硬件抽象层,简单来说,就是对Linux内核驱动程序的封装,向上提供接口,屏蔽低层的实现细节。也就是说,把对硬件的支持分成了两层,一层放在用户...

22810
来自专栏FreeBuf

成人网站PornHub跨站脚本(XSS)漏洞挖掘记

写在前面的话 当PornHub公布了他们的公开漏洞奖励计划之后,我敢肯定的是该网站之前存在的一些低级漏洞或比较容易发现的漏洞都已经被别人挖出来了。 但是当我开...

1.4K8
来自专栏FreeBuf

远丰集团旗下CMS疑有官方后门

起始 这个后门是在去年的某次渗透测试中发现的,但是因为时间点比较敏感,客户也未修复,就还未披露。 他们在中央的网站都留了后门,银行的也留,影响了一大批人,真是官...

4785
来自专栏JAVA高级架构

大型网站技术架构

早期的网站为了节省成本一般会设计成集中式系统,应用程序、数据库等都部署在一台服务器上。 但随着业务的快速度发展,逐渐出现瓶颈,按一定原则**(应用拆分、服务拆分...

3856
来自专栏安恒信息

干货 | Intel CPU漏洞分析与安恒信息产品影响解读

综述 近日,Intel CPU中曝出Meltdown(熔断)和Spectre(幽灵)两大新型漏洞,包括Intel、AMD、ARM等主流CPU在内,几乎...

31111
来自专栏农夫安全

GitHub敏感信息扫描工具

功能设计说明 GitPrey是根据企业关键词进行项目检索以及相应敏感文件和敏感文件内容扫描的工具,其设计思路如下: 根据关键词在GitHub中进行全局代码内容和...

7968
来自专栏知识分享

1-SDK开发初探-8266

先分享一个比较感动的事情 ? ? ? ? ? ? ? 其实做实物是因为好多人看了我的文章之后还是会遇到各种各样的问题,然后呢真是让亲们搞的自己好累..........

3575

扫码关注云+社区

领取腾讯云代金券