初尝 Jest 单元测试

最近的几次发布都犯了小错,都是缺乏或者忽视了测试所导致的。通常来说,一个新功能上线的时候,开发和测试都投入比较多,各项测试都是比较全面的。然而,发布上线也并非意味着不再有bug或者修改。那这时候问题来了,有些修改, 我们会以为很简单,从而放松警惕,偷懒也罢,没有精力也罢,简单验证之后便匆匆发布了。此时,有可能不经意的改动对其它功能造成了影响,bug复bug, bug何其多呀。

那web页面的发布,其优势是可以快速上线新功能或者bugfix,节奏很快,而其缺点也明显,相对于终端的版本发布需要重新走一遍比较重的测试流程而言,就没那么谨慎了。

那web也引入自动化测试吧

当然了,自动化测试不是说一句话那么简单了,前期选型框架,编写用例测试团队都不一定能支持得上,而且web功能变化如此频繁,更新用例说不定还真不如手工过一遍。

挑点简单可动手的, 开发同学自己写单元测试吧。

问题也就来了,做业务需求都没时间了,还要写测试用例?哪来的时间。。。

所以,写单元测试这件痛苦的事情,怎么办?

不同于几年前js乱七八糟,模块化都不普遍的时代,目前团队里主流技术栈就是React,以React天生强制组件化的思想来看,写单元测试应该是天时地利了,而Facebook也提供了配套的测试工具(ReactTestUtils)和测试框架(Jest),所以,看怎么样在已有项目快速补充上单元测试吧。

Jest的口号是 Delightful JavaScript Testing,真的吗?

直奔相关主题,Jest 官网有一个tab Testing React Apps, 那对React是有特别照顾呀。

Snapshot Testing

所谓snapshot,即快照也。通常涉及UI的自动化测试,思路是把某一时刻的标准状态拍个快照,在测试回归的时候进行pixel to pixel的对比。但Jest对React组件的快照则不同,其实是把一个组件给序列化成纯文本, 纯文本的比较,这个真是简单又高效呀。对于一个React组件而言, 传入相同的props,我们是期望得到相同的输出, 这样子一来,通过构造不同的props, 我们即有了不同的测试用例。理想状态中,组件若是无内部状态变化,测试用例覆盖率应该可以达到100%了。当然,仅仅是理想。

先跑跑官网的简单例子,先照步骤安装npm依赖,然后敲代码,jest跑一下:

// Link.react.js
import React from 'react';

const STATUS = {
  HOVERED: 'hovered',
  NORMAL: 'normal',
};

export default class Link extends React.Component {

  constructor(props) {
    super(props);

    this._onMouseEnter = this._onMouseEnter.bind(this);
    this._onMouseLeave = this._onMouseLeave.bind(this);

    this.state = {
      class: STATUS.NORMAL,
    };
  }

  _onMouseEnter() {
    this.setState({class: STATUS.HOVERED});
  }

  _onMouseLeave() {
    this.setState({class: STATUS.NORMAL});
  }

  render() {
    return (
      <a
        className={this.state.class}
        href={this.props.page || '#'}
        onMouseEnter={this._onMouseEnter}
        onMouseLeave={this._onMouseLeave}>
        {this.props.children}
      </a>
    );
  }
// Link.react-test.js
import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer.create(
    <Link page="http://www.facebook.com">Facebook</Link>
  ).toJSON();
  expect(tree).toMatchSnapshot();
});

第一次跑的时候,就会生成一个快照文件,在__snapshots__目录下:

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

在之后的toMatchSnapshot()调用就会与之比较,如有不同,则是用例失败,会打印出具体差异:

如果是代码有修改,需要对应更新快速的话,则执行jest -u重新生成。

例子简单了, 怎么引入现有的项目呢? 从其需要的依赖来看,

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

它是直接支持jsx语法和es6语法的,跑了一个最简单的组件,it works!

再跑一个,发现失败了,报找不到文件。观察下出错信息,发现是有一些文件引用是依赖构建工具处理的。比如说import util from assets/util jest运行的时候只在 node_modules 下去,当然找不到了。

机智的facebook团队早就想到了,Using with webpack 虽然项目用的是fis构建,但是思路是可以参考的,就是给jest加个解析路径的配置,在package.json中添加jest项配置,或者通过--config 参数指定配置文件:

"jest": {
    "collectCoverage": true,
    "testMatch": [ "**/__tests__/**/*.test.js?(x)"],
    "moduleDirectories": ["node_modules", "src"], // 就是这个
    "testPathIgnorePatterns": [
      "/node_modules/",
      "/dev",
      "/src/server"
    ]
  }

在仅仅使用toMatchSnapshot()的情况下,

分支测试覆盖率达到80%以上了,而有一些代码还没有覆盖到,其实是因为组件内部有交互行为,比如说onClick,再继续下补充之后:

我们发现,整体覆盖率都大体提升,而实际上,仅仅就是加了20几行代码而已,就是处理onClick事件,图片的onError事件。

看起来,这样子添加测试用例,倒也不是很麻烦的样子,主要是snapshots的使用,有四两拨千斤效,不过重点在于其输入数据的构造。

可期。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黄奕坤的专栏

火焰图性能调优记

最近手头开发维护的一个辅助小工具经常接到投诉可用性问题, 于是抽时间定位了下, 一看吓一跳, 起初不起眼的一个组件的日志量直接翻了两个数量级。 这怎么吃得消 !

5682
来自专栏Albert陈凯

2018-05-17 架构师技能图谱,搞懂这些找工作无敌数据结构常用算法并发操作系统设计模式运维 & 统计 & 技术支持中间件网络数据库搜索引擎性能大数据安全常用开源框架分布式设计设计思想 & 开发模

1662
来自专栏编程

Java开发必须要知道的知识体系

Java是超高人气编程语言,拥有跨平台、面向对象、泛型编程等特性。在TIOBE编程语言排行榜中,连续夺得第一宝座,而且国内各大知名互联网公司,后端开发首选语言:...

1938
来自专栏java一日一条

从输入 URL 到浏览器接收的过程中发生了什么事情?

首先是「输入 URL」,大部分人的第一反应会是键盘,不过为了与时俱进,这里将介绍触摸屏设备的交互。

363
来自专栏FD的专栏

Effective Testing with RSpec 3 (第一部分:入门)

RSpec 3是一个高效的Ruby测试框架。 我们说生产效率很高,因为关于它的一切 - 它的样式,API,库和设置 - 都是为了在编写出色的软件时为你提供支持。

923
来自专栏余果的专栏

Google分析language垃圾信息

最近一段时间,我在Google Analytics(以下简称GA)中查看网站数据时,发现一个非常可疑的信息...

7141
来自专栏即时通讯技术

IM群聊消息的已读回执功能该怎么实现?

我们平时在使用即时通讯应用时候,每当发出一条聊天消息,都希望对方尽快看到,并尽快回复,但对方到底有没有真的看到?我却并不知道。

902
来自专栏大前端开发

从编程小白到全栈开发:数据 (1)

有些事情时刻都在发生,但是我们通常很少意识到它们的存在。比如,当我们使用网页或移动应用的时候,其实在不断的产生着数据:注册一个网站或app的账号、发一条微博、写...

773
来自专栏phodal

深入浅出全栈工程师: 编码篇序

在我们真正开始去写代码之前,我们可能会去考虑一些事情。怎么去规划我们的任务,如果去细分这个任务。 如果一件事可以自动化,那么就尽量去自动化,毕竟你是一个程序员。...

1636
来自专栏散尽浮华

Centos7下部署分布式跟踪工具Pinpoint的操作记录

一、Pinpoint简单介绍 Pinpoint是一款对Java编写的大规模分布式系统的APM工具,有些人也喜欢称呼这类工具为调用链系统、分布式跟踪系统。一般来说...

902

扫码关注云+社区