首页 > 资讯 > 前端开发 > JavaScript >前端自动化测试之Jest 进阶教程示例

733

分享到

前端自动化测试之Jest 进阶教程示例

Jest 前端自动化测试 Jest 自动化测试进阶 2023-02-14 12:02:07 733人浏览安东尼

摘要

目录Jest Mockmock 异步方法Mock TimersMock 类Snapshot 快照测试DOM 测试Jest Mock mock 异步方法 export const r

Jest Mock

mock 异步方法

export const runCallback = callBack => {
  return callBack();
};

我们对上面的代码进行测试：

import { runCallback } from "./demo";
test("测试 runCallback", () => {
  const fn = jest.fn(); // mock函数，捕获函数的调用
  runCallback(fn);
  expect(fn).toBeCalled();
  // expect(runCallback(() => "hello")).toBe("hello");
});

通过 jest.fn 生成的 mock 函数，我们可以打印其 fn.mock，得到以下结果：

calls 被调用的情况，通过 fn.mock.calls.length 可获取 mock 函数被调用次数，每个数组里存放传递给 mock 函数的参数
instances jest.fn 生成函数的 this 指向
invocationCallOrder 传递进去函数的执行顺序
results 函数输出的结果

// mock函数返回123，results的value变为123
const fn = jest.fn(() => 123); 
// 等价于
fn.mockReturnValue("123");
// 等价于
fn.mockImplementation(() => 123);
// 模拟返回一次函数结果
fn.mockReturnValueOnce("123");
// 等价于
fn.mockImplementationOnce(() => 123);

测试异步代码每次都发送真实请求，无疑是很慢的，我们可以使用 mock 模拟请求方法

导出我们的请求方法

// demo.js
import axiOS from "axios";
export function getData() {
  return axios.get("Http://www.dell-lee.com/React/api/demo.JSON");
}

同级目录下建一个 **mocks** 的文件夹，建立同名的文件，此文件就是模拟请求的文件

export function fetchData() {
  return Promise.resolve({
    success: true
  });
}

测试用例部分：

// 模拟 request 模块
jest.mock("./request.js"); // 也可以在 jest.config.js 里面手动设置 automock 为 true
// 取消 mock
// jest.unmock("./demo.js");
import { fetchData } from "./request";
test("测试 fetchData", () => {
  // 此请求实际会请求 __mocks__ 下的 request.js 方法
  return fetchData().then(data => {
    expect(data).toEqual({
      success: true
    });
  });
});

如果我们 request.js 某些方法不需要 mock

const { getNumber } = jest.requireActual("./request.js");

Mock Timers

当我们有如下代码需要测试的时候：

export default callback => {
  setTimeout(() => {
    callback();
  }, 3000);
};

测试：

import timer from "./timer";
test("测试 timer", done => {
  timer(() => {
    expect(1).toBe(1);
    done();
  });
});

我们不可能总是等待定时器完才去执行用例，这时候我们要用 Jest 来操作时间！步骤如下：

通过 jest.useFakeTimers() 使用 jest "自制的" 定时器
执行 timer 函数之后，快进时间 3 秒 jest.advanceTimersByTime(3000)，这个方法可以调用任意次，快进的时间会叠加
这时候我们已经穿梭到了 3 秒后，expect 也能生效了！

import timer from "./timer";
beforeEach(() => {
  jest.useFakeTimers();
});
test("测试 timer", () => {
  // jest.fn() 生成的是一个函数，这个函数能被监听调用过几次
  const fn = jest.fn();
  timer(fn);
  jest.advanceTimersByTime(3000);
  expect(fn).toHaveBeenCalledTimes(1);
});

Mock 类

当我们只关注类的方法是否被调用，而不关心方法调用产生的结果时，可以 mock 类

在 util.js 中定义了 Util 类

export class Util {
  a() {}
  b() {}
}

在 useUtil.js 调用这个类

import { Util } from "./util";
export function useUtil() {
  let u = new Util();
  u.a();
  u.b();
}

我们需要测试 u.a 和 u.b 被调用

jest.mock("util.js") 会将 Util、Util.a、Util.b 都 mock 成 jest.fn

jest.mock("util.js"); // mock Util 类
import { Util } from "./util/util";
import { useUtil } from "./util/uesUtil";
test("util 的实例方法被执行了", () => {
  useUtil();
  expect(Util).toHaveBeenCalled();
  expect(Util.mock.instances[0].a).toHaveBeenCalled();
  expect(Util.mock.instances[0].b).toHaveBeenCalled();
});

Snapshot 快照测试

将文件内容拍照一样拍下来。下次运行测试用例的时候，如果内容变化，则会报错

config.js

export const generateConfig = () => {
  return {
    server: "https://localhost",
    port: 8080,
    domain: "localhost"
  };
};

测试用例部分：

import { generateConfig } from "./config";
test("测试 generateConfig", () => {
  // 保存会生成 __snapshots__ 目录，记住配置相关内容
  expect(generateConfig()).toMatchSnapshot();
});

改变 config 文件内容，测试不通过，按 u 可以更新快照

如果有两个快照改变，我们需要一个个更新，我们可以按 i进入以下界面：

按 s 先跳过此次测试用例

按 u 可一个个更新快照内容，使得测试通过

如果我们配置有不断变化的量：

time: new Date()

我们可以这样测试，保证 time 是一个 Date 类型即可

test("测试 generateConfig", () => {
  expect(generateConfig()).toMatchSnapshot({
    time: expect.any(Date)
  });
});

我们除了可以成目录保存快照内容，还可以生成行内快照，存放本文件即可

test("测试 generateConfig", () => {
  // 需要安装prettier
  expect(generateConfig()).toMatchInlineSnapshot();
});

DOM 测试

jest 自己模拟了一套 jsDom api ，所以我们能使用 jest 测试 dom

dom.js

export function aDDDivToBody() {
  const div = document.createElement("div");
  document.body.appendChild(div);
}

测试：

import { addDivToBody } from "./timer";
test("测试 addDivToBody", () => {
  addDivToBody();
  addDivToBody();
  expect(document.body.querySelectorAll("div").length).toBe(2);
});

以上就是前端 自动化测试之Jest 进阶教程示例的详细内容，更多关于Jest 前端自动化测试的资料请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 前端自动化测试之Jest 进阶教程示例

本文链接: https://www.lsjlt.com/news/196001.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

前端自动化测试之Jest 进阶教程示例

目录Jest Mockmock 异步方法Mock TimersMock 类Snapshot 快照测试DOM 测试Jest Mock mock 异步方法 export const r...

99+

2023-02-14

Jest 前端自动化测试 Jest 自动化测试进阶
Puppeteer前端自动化测试的示例分析

这篇文章主要为大家展示了“Puppeteer前端自动化测试的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Puppeteer前端自动化测试的示例分析”这...

99+

2024-04-02
前端工程师必备：JavaScript Jest 单元测试进阶指南

...

99+

2024-04-02
前端自动化测试Vue中TDD和单元测试示例详解

目录1、简单用例入门2、快照测试3、覆盖率测试4、结合 Vuex 进行测试1、简单用例入门 Vue 提供了 @vue/test-utils 来帮助我们进行单元测试，创建 Vue 项...

99+

2023-02-14

Vue TDD单元测试 Vue 前端自动化测试
JavaScript Jest 与 Karma 协作：自动化测试之旅

简介 JavaScript Jest 和 Karma 是前端开发中不可或缺的自动化测试工具。Jest 是一个流行的单元测试框架，可帮助您测试单个函数、类或模块。另一方面，Karma 是一个测试运行器，可用于在浏览器环境中运行测试。集成...

99+

2024-02-17

JavaScript Jest Karma 自动化测试单元测试端到端测试
Angular.js自动化测试之protractor的示例分析

小编给大家分享一下Angular.js自动化测试之protractor的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！前...

99+

2024-04-02
H5前端性能实例测试教程

本篇内容主要讲解“H5前端性能实例测试教程”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“H5前端性能实例测试教程”吧!一、开篇：H5 页面加载过程浅析如下图所示...

99+

2024-04-02
前端单元测试之UI测试功能性代码测试教程

目录前言UI测试:功能性代码测试:让人闻风丧胆的单元测试代码测试代码Jest介绍一、基础教程安装源码开发测试用例编写开始测试二、核心API全局方法匹配器异步代码测试回调Promise...

99+

2022-11-13

前端单元测试前端UI测试前端功能性代码测试
前端进阶JS数组高级用法大全教程示例

目录1.批量制造数据2.数组合并去重3.创建数组的几种方式4.类数组常见的类数组判断是否是类数组类数组如何转换为数组如何让类数组使用上数组丰富的内建方法类数组和数组的区别5.数组方法...

99+

2024-04-02
selenium自动化测试的示例分析

本篇文章为大家展示了selenium自动化测试的示例分析，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。下载驱动器http://chromedriver.storage.googleapis.com/...

99+

2023-06-26
全网最细最全Appium自动化测试 iOS入门教程，App自动化测试教程，精细整理

目录：导读一、MAC电脑上 Appium 的安装流程二、流程图三、下载AppiumServerGui和AppiumInspector 四、开始测试 1、真机测试 1.1 准备工作 ...

99+

2023-09-26

appium 测试工具
python自动化测试selenium屏幕截图示例

WebDriver内置了测试中捕获屏幕并保存的方法。示例脚本：（1）save_screenshot(filename)：保存屏幕截图 from selenium impor...

99+

2024-04-02
Python接口测试自动化的示例代码

本篇内容主要讲解“Python接口测试自动化的示例代码”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Python接口测试自动化的示例代码”吧!1、接口请求python 特别是 python 3....

99+

2023-06-16
python自动化测试工具Helium使用示例

目录前言示例总结前言 Helium工具是对Selenium的封装，将Selenium工具的使用变得更加简单。Selenium虽然好，但是在它的使用过程中元素的提取还是比较复杂的，不论...

99+

2024-04-02
python+requests接口自动化测试框架实例详解教程

摘要: python + requests实现的接口自动化框架详细教程前段时间由于公司测试方向的转型，由原来的web页面功能测试转变成接口测试，之前大多都是手工进行，利用postman和jmeter进行的接口测试，后来，组内有人讲原先we...

99+

2023-09-29

测试工具 pytest python 软件测试经验分享
移动开发中自动化测试的示例分析

小编给大家分享一下移动开发中自动化测试的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、自动化测试的概念自动化测试是把以人为驱动的测试行为转化为机器执行...

99+

2023-06-04
JavaScript进阶之前端文件上传和下载示例详解

目录文件下载1.通过a标签点击直接下载2.open或location.href3.Blob和Base64文件上传文件上传思路File文件上传单个文件-客户端上传文件-服务端多文件上传...

99+

2024-04-02
python+appium实现自动化测试的示例代码

目录1.什么是Appium2.启动一个app自动化程序的步骤3.appium服务介绍4. appium客户端使用5.adb的使用 6.Appium启动过程分析1....

99+

2024-04-02
python自动化测试中APScheduler Flask的应用示例

目录使用背景什么是 APScheduler 框架？APScheduler 框架包含四个组成部分APScheduler 在 flask 中使用编写任务函数，开始 APScheduler...

99+

2024-04-02
python自动化测试selenium定位frame及iframe示例

frame标签有frameset、frame、iframe三种，frameset和其它普通标签没有区别，不会影响正常定位，而frame与iframe对selenium定位而言是一样的...

99+

2024-04-02