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

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");
});

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

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

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
    });
  });
});

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

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

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

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

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

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

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();
});

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

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

time: new Date()

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

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

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);
});