多测师是一家拥有先进的教学理念,强大的师资团队,业内好评甚多的接口自动化测试培训机构!

17727591462

联系电话

您现在所在位置:接口自动化测试培训 > 新闻资讯

前端自动化测试框架Jest 基础入门-自动化测试

更新时间:2022-06-13 09:06:45 作者:多测师 浏览:41

  一、引言

  前端这几年发展的非常迅速,我们的系统的功能正在变的越来越复杂,这对我们的前端工程化能力提出了更高的要求,听到工程化,大家的第一反应肯定是高质量的代码设计和高质量的代码实现。但实际上,前端自动化测试也是前端工程化里面非常重要的一个环节。

前端自动化测试框架Jest 基础入门-自动化测试

  二、Jest 基础入门

  一个普通前端听到自动化测试,第一反应可能是:我工作这么多年也没写过测试,这个东西有用吗?

  答:非常有用

  如果你打开GitHub,去看一下流行的开源库或者框架的源码,你会发现,在这些源码里面,全部都包含了大量的自动化测试的代码。比如antd、lodash、再比如vue、react、echarts、redux等等……

  开源的工具需要稳定性,而引入前端自动化测试为开源项目提供稳定性,是再好不过的选择了。

  三、学习前提

  阅读这篇文章需要以下知识储备:

  ·js、es6 基础语法

  ·node、npm 相关知识

  ·git 的相关操作

  ·react或者vue,至少了解一个

  ·状态管理工具,至少了解一个

  四、背景及原理

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

  // math.js

  function add(a, b) {

  return a + b;

  }

  function minus(a, b) {

  return a - b;

  }

  这时候我们可以在业务代码里去使用这个数学库。

  但是,假如,上面的minus函数我们不小心写错了,把减法写成了乘法,如果直接在业务代码中使用这个方法,就会带来无法预期的bug。

  所以这时候,我们就需要对math.js这个公共库进行自动化测试,确保没问题之后,再让业务组件去调用,这样就会保证不会出特别多的bug了。

  我们可以这样做:

  在该目录下创建一个math.test.js文件,然后写一点测试代码:

  const result = add(3, 7);

  const expect = 10;

  if (result !== expect) {

  throw new Error(`3 + 7 应该等于${expect},结果却是${result}`);

  }

  const result = minus(3, 3);

  const expect = 0;

  if (result !== expect) {

  throw new Error(`3 - 3 应该等于${expect},结果却是${result}`);

  }

  这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。

  这就是自动化测试最原始的雏形。

  然后我们思考一个问题,如何将这堆代码进行简化,做成一个公用的函数,比如这样:

  // 测试 3 + 3 是否等于 6

  expect(add(3, 3)).toBe(6);

  // 测试 3 - 3 是否等于 0

  expect(minus(3, 3)).toBe(0);

  expect 方法实现:

  function expect(result) {

  return {

  toBe(actual) {

  if (result !== actual) {

  throw new Error("预期值和实际值不相等");

  }

  },

  };

  }

  这时候我们运行这段代码,会发现没有抛出任何异常,说明这两个测试用例都通过了。

  虽然实现了 expect 函数,但是报错的内容始终是一样的,我们不知道是具体哪个方法出现了问题,这时候我们就会想到,我们需要将这个 expect 方法进一步做改良,我们如果能在 expect 方法外部再包装一层,就可以多传递一些额外的内容,比如创造这样的写法:

  test("测试加法 3 + 3", () => {

  expect(add(3, 3)).toBe(6);

  });

  test("测试减法 3 - 3", () => {

  expect(minus(3, 3)).toBe(0);

  });

  这样封装之后,我们既能进行测试,又能得到测试的描述。

  test 方法实现:

  function test(desc, fn) {

  try {

  fn();

  console.log(`${desc} 通过测试`);

  } catch {

  console.log(`${desc} 没有通过测试`);

  }

  }

  所以前端自动化测试到底是什么?

  答:实际上就是写了一段其它的用来测试的js代码,通过测试代码去运行业务代码,判断实际结果是否满足预期结果,如果满足,就是没有问题,如果不满足,就是有问题。

  上面实现的 expect 方法 和 test 方法 实际上和主流的前端自动化测试框架 jest 里面的语法是完全一致的。所以上面的示例代码可以理解为 jest 的底层实现原理。

  以上内容为大家介绍了前端自动化测试框架Jest 基础入门,本文由多测师亲自撰写,希望对大家有所帮助。了解更多自动化测试相关知识:https://www.aichudan.com/xwzx/

联系电话

17727591462

返回顶部