51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1038|回复: 0
打印 上一主题 下一主题

[转贴] 前端自动化测试框架Jest 基础入门

[复制链接]
  • TA的每日心情
    擦汗
    2 小时前
  • 签到天数: 1026 天

    连续签到: 1 天

    [LV.10]测试总司令

    跳转到指定楼层
    1#
    发表于 2022-3-17 10:42:16 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
     一、引言
      前端这几年发展的非常迅速,我们的系统的功能正在变的越来越复杂,这对我们的前端工程化能力提出了更高的要求,听到工程化,大家的第一反应肯定是高质量的代码设计和高质量的代码实现。
      但实际上,前端自动化测试也是前端工程化里面非常重要的一个环节。

      二、Jest 基础入门
      一个普通前端听到自动化测试,第一反应可能是:我工作这么多年也没写过测试,这个东西有用吗?
      答:非常有用
      如果你打开GitHub,去看一下流行的开源库或者框架的源码,你会发现,在这些源码里面,全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……
      开源的工具需要稳定性,而引入前端自动化测试为开源项目提供稳定性,是再好不过的选择了。

      三、学习前提
      阅读这篇文章需要以下知识储备:
      ·js、es6 基础语法
      ·node、npm 相关知识
      ·git 的相关操作
      ·react或者vue,至少了解一个
      ·状态管理工具,至少了解一个

      四、背景及原理
      首先在任意目录下创建一个math.js文件,假设这个文件是一个数学库,里面定义两个函数,分别是加法和减法:
    1. // math.js

    2. function add(a, b) {
    3.   return a + b;
    4. }

    5. function minus(a, b) {
    6.   return a - b;
    7. }
    复制代码
    这时候我们可以在业务代码里去使用这个数学库。
      但是,假如,上面的minus函数我们不小心写错了,把减法写成了乘法,如果直接在业务代码中使用这个方法,就会带来无法预期的bug。
      所以这时候,我们就需要对math.js这个公共库进行自动化测试,确保没问题之后,再让业务组件去调用,这样就会保证不会出特别多的bug了。
      我们可以这样做:
      在该目录下创建一个math.test.js文件,然后写一点测试代码:
    1. const result = add(3, 7);
    2. const expect = 10;

    3. if (result !== expect) {
    4.   throw new Error(`3 + 7 应该等于${expect},结果却是${result}`);
    5. }
    复制代码
    1. const result = minus(3, 3);
    2. const expect = 0;

    3. if (result !== expect) {
    4.   throw new Error(`3 - 3 应该等于${expect},结果却是${result}`);
    5. }
    复制代码
    这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。
      这就是自动化测试最原始的雏形。
      然后我们思考一个问题,如何将这堆代码进行简化,做成一个公用的函数,比如这样:
    1. // 测试 3 + 3 是否等于 6
    2. expect(add(3, 3)).toBe(6);

    3. // 测试 3 - 3 是否等于 0
    4. expect(minus(3, 3)).toBe(0);
    复制代码
    expect 方法实现:
    1. function expect(result) {
    2.   return {
    3.     toBe(actual) {
    4.       if (result !== actual) {
    5.         throw new Error("预期值和实际值不相等");
    6.       }
    7.     },
    8.   };
    9. }
    复制代码
     这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。
      虽然实现了 expect 函数,但是报错的内容始终是一样的,我们不知道是具体哪个方法出现了问题,这时候我们就会想到,我们需要将这个 expect 方法进一步做改良,我们如果能在 expect 方法外部再包装一层,就可以多传递一些额外的内容,比如创造这样的写法:
    1. test("测试加法 3 + 3", () => {
    2.   expect(add(3, 3)).toBe(6);
    3. });

    4. test("测试减法 3 - 3", () => {
    5.   expect(minus(3, 3)).toBe(0);
    6. });
    复制代码
    这样封装之后,我们既能进行测试,又能得到测试的描述。
      test 方法实现:
    1. function test(desc, fn) {
    2.   try {
    3.     fn();
    4.     console.log(`${desc} 通过测试`);
    5.   } catch {
    6.     console.log(`${desc} 没有通过测试`);
    7.   }
    8. }
    复制代码
    所以前端自动化测试到底是什么?
      答:实际上就是写了一段其它的用来测试的js代码,通过测试代码去运行业务代码,判断实际结果是否满足预期结果,如果满足,就是没有问题,如果不满足,就是有问题。
      上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。






    分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-9-29 11:41 , Processed in 0.087597 second(s), 24 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表