如何测试在窗口对象和打字稿中定义的函数

Question

我正在尝试测试对全局窗口对象上定义的函数的调用。我已经查看了多个示例，但仍然无法运行一个简单的测试用例。

api.ts

import "./global.d";
const verifier = window.Verifier;

export class Api {
  constructor(private readonly id: string) {}
  public fetchData() {
    return new Promise<object>((resolve, reject) => {
      verifier.request({
        request: {
          id: this.id
        },
        onSuccess: (data: object) => {
          resolve(data);
        },
        onFailure: () => {
          reject("Error!");
        }
      });
    });
  }
}

api.test.ts

import { Api } from "./Api";

let windowSpy: any;

describe("Test Apis", () => {
  beforeEach(() => {
    windowSpy = jest.spyOn(window, "window", "get");
  });

  afterEach(() => {
    windowSpy.mockRestore();
  });
  it("should call the function", () => {
    const mockedReplace = jest.fn();
    windowSpy.mockImplementation(() => ({
      Verifier: {
        request: mockedReplace
      }
    }));
    const api = new Api("123");
    api.fetchData();
    expect(mockedReplace).toHaveBeenCalled();
  });
});

global.d.t.ts

import { Verifier } from "./verifier";

declare global {
  interface Window {
    Verifier: Verifier;
  }
}

verifier.d.ts

type RequestPayload = {
  request: {
    id: string;
  };
  onSuccess: (data: object) => void;
  onFailure: () => void;
};
type verifyCode = number;

export interface Verifier {
  request: (requestPayload: RequestPayload) => verifyCode;
}

我也创建了一个代码框示例，以便于参考

Answer 1

这里的问题是您的进口订单。

当您从“ ./api” 导入{api}时，您运行 const verifier = window.verifier; ，当时是 undefined << /代码>。

如果您更改导入和间谍的顺序，则应按预期工作：

import { RequestPayload } from "./verifier";

const mockRequest = jest
  .fn()
  .mockImplementation((requestPayload: RequestPayload) => 1);

jest.spyOn(window, "window", "get").mockImplementation(() => {
  return {
    Verifier: {
      request: mockRequest,
    },
  } as unknown as Window & typeof globalThis;
});

// // // // //

import { Api } from "./api";

// // // // //

describe("Test Apis", () => {
  let api: Api;

  beforeEach(() => {
    jest.clearAllMocks();
  });

  beforeEach(() => {
    api = new Api("123");
  });

  it("should have valid function", () => {
    expect(typeof api.fetchData).toBe("function");
  });

  it("should call the function", () => {
    api.fetchData();

    expect(mockRequest).toHaveBeenCalled();
  });
});

您还可以直接考虑使用 window.verifier ，使测试有点清洁：

export class Api {
  constructor(private readonly id: string) {}
  public fetchData() {
    return new Promise<object>((resolve, reject) => {
      window.Verifier.request({
        request: {
          id: this.id,
        },
        onSuccess: (data: object) => {
          resolve(data);
        },
        onFailure: () => {
          reject("Error!");
        },
      });
    });
  }
}

describe("Test Apis", () => {
  let api: Api, mockRequest: jest.Mock;

  beforeEach(() => {
    jest.clearAllMocks();

    mockRequest = jest
      .fn()
      .mockImplementation((requestPayload: RequestPayload) => 1);

    jest.spyOn(global, "window", "get").mockImplementation(() => {
      return {
        Verifier: {
          request: mockRequest,
        },
      } as unknown as Window & typeof globalThis;
    });
  });

  beforeEach(() => {
    api = new Api("123");
  });

  it("should have valid function", () => {
    expect(typeof api.fetchData).toBe("function");
  });

  it("should call the function", () => {
    api.fetchData();

    expect(mockRequest).toHaveBeenCalled();
  });
});