关闭

前端自动化测试框架Jest命令行工具的使用和异步代码的测试

发表于:2022-5-20 09:27

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:三年没洗澡    来源:掘金

#
Jest
  摘要:众所周知,在前面的代码中,我们在编写一个测试用例的时候用到了 test、expect、toBe 三个方法,在之前我们也介绍了 Jest 的基础使用、Jest 的简单配置、 Jest 中的匹配器(matchers),今天我们来说说 Jest 命令行工具的使用和异步代码的测试。

  Jest命令行工具的使用
  进入到 package.json 文件中,在 test 命令行后面加上 --watchAll 参数:
"scripts": {
  "test": "jest --watchAll",
  "coverage": "jest --coverage"
},

  这样做的好处是,我们不需要每次都执行 npm run test,在第一次执行之后,进程会自动监听测试用例的变化,如果测试用例代码发生了变化,会自动执行。
  运行npm run test,会看到如下选项:

  可以看到,进入到 Watch 模式中,有很多快捷键,这些快捷键的作用如下:
  按f键:只运行失败的测试用例
  按o键:只运行发生更改的测试用例
  按p键:按文件名regex模式进行筛选
  按t键:按测试名称regex模式进行筛选
  按q键:退出监测模式
  按Enter键:触发测试用例
  Jest 中有很多命令行工具,合理的使用命令行,会让我们的测试变的更加灵活、好用。

  异步代码的测试
  要测试异步代码,需要先编写异步代码,安装 axios,安装好 axios 之后,不管是在node环境还是浏览器环境,我们都可以发送请求了:
npm install axios --save

  首先准备一个接口,这个接口的返回值是一个json对象:
{
  "success": true
}

  然后引入axios,编写一个异步函数,并且导出:
import axios from "axios";

export const getData = () => {
  return axios.get("http://www.dell-lee.com/react/api/demo.json");
};

  在测试异步函数的时候,需要这样写:

  方法一
  Promises 规范
  测试成功的返回值:
import { getData } from "./index";

test("测试 getData 的返回值为 { success: true }", () => {
  return getData().then(res => {
    expect(res.data).toEqual({ success: true });
  });
});

  在测试成功返回值的时候,需要在.then里面执行测试用例,而且必须在开头加上return,返回整个异步代码,否则这个测试是没有意义的。
  如果你忽略了这个return,你的测试将在异步函数返回的 promise 解析之前完成。
  测试失败的返回值:
import { getData } from "./index";

test("测试 getData 的返回值包含 404", () => {
  return getData().catch(err => {
    expect.assertions(1);
    expect(err.toString()).toMatch("404");
  });
});

  在测试失败返回值的时候,需要在.catch里面执行测试用例,但是这样做的话,如果请求发送成功,异步函数走进了.then回调,.catch里面的内容不会被执行,相当于这个测试用例没有做任何事情,还是照样能通过测试。
  要解决这个问题,需要在前面加上expect.assertions(1);,用来断言这个测试用例调用了一定数量的expect,如果调用次数不够,测试用例就不会通过。

  方法二
  .resolves 匹配器 / .rejects 匹配器
  测试成功的返回值:
import { getData } from "./index";

test("测试 getData 的返回值为 { success: true }", () => {
  return expect(getData()).resolves.toEqual({ success: true });
});

  你也可以在 expect 语句中使用.resolves匹配器,Jest将等待该 Promises 函数被 resolve。
  如果 Promises 函数被 reject,测试用例将自动失败。
  测试失败的返回值:
import { getData } from "./index";

test("测试 getData 的返回值包含 404", () => {
  return expect(getData()).rejects.toMatch("404");
});

  同理,你也可以在 expect 语句中使用.rejects匹配器,Jest将等待该 Promises 函数被 reject。
  如果 Promises 函数被 resolve,测试用例将自动失败。

  方法三
  Async / Await
  测试成功的返回值:
import { getData } from "./index";

test("测试 getData 的返回值为 { success: true }", async () => {
  const { data } = await getData();
  expect(data).toEqual({ success: true });
});

  你也可以像编写普通的 js 代码那样,给 test 方法的回调函数传递 async 关键字,在 expect 语句前使用await关键字调用异步函数拿到返回值。
  测试失败的返回值:
import { getData } from "./index";

test("测试 getData 的返回值包含 404", async () => {
  expect.assertions(1);
  try {
    await getData();
  } catch (err) {
    expect(err.message).toMatch("404");
  }
});

  同理,如果需要测试失败的返回值,你需要使用原生 js 中的 try / catch 语句来捕获异常,同时配合 expect.assertions(1); 用来校验这个测试用例调用了一定数量的expect。如果调用次数不够,说明这里没有捕获到异常,测试用例就不会通过。

  方法四
  结合使用
  Async、Await 和 .resolves、.rejects 结合使用。
import { getData } from "./index";

test("测试 getData 返回成功", async () => {
  await expect(getData()).resolves.toEqual({ success: true });
});

test("测试 getData 返回失败", async () => {
  await expect(getData()).rejects.toMatch("404");
});

  在这种情况下,async 和 await 与 promise 示例使用的逻辑是相同的语法糖。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号