快捷導(dǎo)航

前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例

更新時(shí)間：2023年02月14日 10:38:56 作者：云牧

這篇文章主要為大家介紹了前端自動(dòng)化測(cè)試之Jest?進(jìn)階教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

Jest Mock

mock 異步方法

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

我們對(duì)上面的代碼進(jìn)行測(cè)試：

import { runCallback } from "./demo";
test("測(cè)試 runCallback", () => {
  const fn = jest.fn(); // mock函數(shù)，捕獲函數(shù)的調(diào)用
  runCallback(fn);
  expect(fn).toBeCalled();
  // expect(runCallback(() => "hello")).toBe("hello");
});

通過 jest.fn 生成的 mock 函數(shù)，我們可以打印其 fn.mock，得到以下結(jié)果：

calls 被調(diào)用的情況，通過 fn.mock.calls.length 可獲取 mock 函數(shù)被調(diào)用次數(shù)，每個(gè)數(shù)組里存放傳遞給 mock 函數(shù)的參數(shù)
instances jest.fn 生成函數(shù)的 this 指向
invocationCallOrder 傳遞進(jìn)去函數(shù)的執(zhí)行順序
results 函數(shù)輸出的結(jié)果

// mock函數(shù)返回123，results的value變?yōu)?23
const fn = jest.fn(() => 123); 
// 等價(jià)于
fn.mockReturnValue("123");
// 等價(jià)于
fn.mockImplementation(() => 123);
// 模擬返回一次函數(shù)結(jié)果
fn.mockReturnValueOnce("123");
// 等價(jià)于
fn.mockImplementationOnce(() => 123);

測(cè)試異步代碼每次都發(fā)送真實(shí)請(qǐng)求，無疑是很慢的，我們可以使用 mock 模擬請(qǐng)求方法

導(dǎo)出我們的請(qǐng)求方法

// demo.js
import axios from "axios";
export function getData() {
  return axios.get("http://www.dell-lee.com/react/api/demo.json");
}

同級(jí)目錄下建一個(gè) **mocks** 的文件夾，建立同名的文件，此文件就是模擬請(qǐng)求的文件

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

測(cè)試用例部分：

// 模擬 request 模塊
jest.mock("./request.js"); // 也可以在 jest.config.js 里面手動(dòng)設(shè)置 automock 為 true
// 取消 mock
// jest.unmock("./demo.js");
import { fetchData } from "./request";
test("測(cè)試 fetchData", () => {
  // 此請(qǐng)求實(shí)際會(huì)請(qǐng)求 __mocks__ 下的 request.js 方法
  return fetchData().then(data => {
    expect(data).toEqual({
      success: true
    });
  });
});

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

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

Mock Timers

當(dāng)我們有如下代碼需要測(cè)試的時(shí)候：

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

測(cè)試：

import timer from "./timer";
test("測(cè)試 timer", done => {
  timer(() => {
    expect(1).toBe(1);
    done();
  });
});

我們不可能總是等待定時(shí)器完才去執(zhí)行用例，這時(shí)候我們要用 Jest 來操作時(shí)間！步驟如下：

通過 jest.useFakeTimers() 使用 jest "自制的" 定時(shí)器
執(zhí)行 timer 函數(shù)之后，快進(jìn)時(shí)間 3 秒 jest.advanceTimersByTime(3000)，這個(gè)方法可以調(diào)用任意次，快進(jìn)的時(shí)間會(huì)疊加
這時(shí)候我們已經(jīng)穿梭到了 3 秒后，expect 也能生效了！

import timer from "./timer";
beforeEach(() => {
  jest.useFakeTimers();
});
test("測(cè)試 timer", () => {
  // jest.fn() 生成的是一個(gè)函數(shù)，這個(gè)函數(shù)能被監(jiān)聽調(diào)用過幾次
  const fn = jest.fn();
  timer(fn);
  jest.advanceTimersByTime(3000);
  expect(fn).toHaveBeenCalledTimes(1);
});

Mock 類

當(dāng)我們只關(guān)注類的方法是否被調(diào)用，而不關(guān)心方法調(diào)用產(chǎn)生的結(jié)果時(shí)，可以 mock 類

在 util.js 中定義了 Util 類

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

在 useUtil.js 調(diào)用這個(gè)類

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

我們需要測(cè)試 u.a 和 u.b 被調(diào)用

jest.mock("util.js") 會(huì)將 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 的實(shí)例方法被執(zhí)行了", () => {
  useUtil();
  expect(Util).toHaveBeenCalled();
  expect(Util.mock.instances[0].a).toHaveBeenCalled();
  expect(Util.mock.instances[0].b).toHaveBeenCalled();
});

Snapshot 快照測(cè)試

將文件內(nèi)容拍照一樣拍下來。下次運(yùn)行測(cè)試用例的時(shí)候，如果內(nèi)容變化，則會(huì)報(bào)錯(cuò)

config.js

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

測(cè)試用例部分：

import { generateConfig } from "./config";
test("測(cè)試 generateConfig", () => {
  // 保存會(huì)生成 __snapshots__ 目錄，記住配置相關(guān)內(nèi)容
  expect(generateConfig()).toMatchSnapshot();
});

改變 config 文件內(nèi)容，測(cè)試不通過，按 u 可以更新快照

如果有兩個(gè)快照改變，我們需要一個(gè)個(gè)更新，我們可以按 i進(jìn)入以下界面：

按 s 先跳過此次測(cè)試用例

按 u 可一個(gè)個(gè)更新快照內(nèi)容，使得測(cè)試通過

如果我們配置有不斷變化的量：

time: new Date()

我們可以這樣測(cè)試，保證 time 是一個(gè) Date 類型即可

test("測(cè)試 generateConfig", () => {
  expect(generateConfig()).toMatchSnapshot({
    time: expect.any(Date)
  });
});

我們除了可以成目錄保存快照內(nèi)容，還可以生成行內(nèi)快照，存放本文件即可

test("測(cè)試 generateConfig", () => {
  // 需要安裝prettier
  expect(generateConfig()).toMatchInlineSnapshot();
});

DOM 測(cè)試

jest 自己模擬了一套 jsDom api ，所以我們能使用 jest 測(cè)試 dom

dom.js

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

測(cè)試：

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

以上就是前端自動(dòng)化測(cè)試之Jest 進(jìn)階教程示例的詳細(xì)內(nèi)容，更多關(guān)于Jest 前端自動(dòng)化測(cè)試的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: