javascript - 在 Jest 中用测试覆盖抽象类方法

Question

我有一个抽象的通用服务类。

export default abstract class GenericService<Type> implements CrudService<Type> {
    private readonly modifiedUrl: URL;

    public constructor(url: string) {
        this.modifiedUrl = new URL(url, window.location.href);
    }

    public async get(path?: string, filter?: URLSearchParams): Promise<Type> {
        try {
            if (path) {
                this.modifiedUrl.href += `${path}`;
            }
            addQueryParams(this.modifiedUrl, filter);

            const response = await handleRequest(`${this.modifiedUrl}`, getFetchOptions('GET'));
            const data = await response.json();
            return (await data.data) ? data.data : data;
        } catch (error) {
            throw new Error(`Runtime error: ${error}`);
        }
    }
}

export async function handleRequest(input: RequestInfo, init: RequestInit): Promise<Response> {
    const response = await fetch(input, init);

    if (!response.ok) {
        throw new Error(`Network response was not ok: ${response}`);
    }

    return response;
}

我需要用测试覆盖这个 GenericService 的 get 方法。我试过这个:

jest.mock('../../components/crudTable/service/GenericService');
const genericService = GenericService;

export class DummyClass {
    public name: string = '';
}
export class DummyService extends GenericService<DummyClass> {}

describe('Generic Service', () => {
    it('1- spy prototype function', async () => {
        const spy = jest.spyOn(genericService.prototype, 'get');
        await genericService.prototype.get();
        expect(spy).toHaveBeenCalledTimes(1);
    });
    it('2- mock prototype function', async () => {
        const mockFn = jest.fn(genericService.prototype.get);
        await mockFn();
        expect(mockFn).toHaveBeenCalledTimes(1);
    });
    it('3- mock subclass function', async () => {
        const dummyService = new DummyService('test url');
        const mockFn = jest.fn(dummyService.get);
        await mockFn();
        expect(mockFn).toHaveBeenCalledTimes(1);
    });
});

此测试有效，但覆盖率统计表明它仍未被覆盖。 那么如何隐藏GenericService的所有get方法呢？

Answer 1

可以考虑下面的做法

GenericService.spec.js

import GenericSerice from "./GenericService";

class DummyService extends GenericSerice {}

describe("GenericSerice", () => {
  beforeAll(() => {
    global.fetch = jest.fn();
  });

  describe("extended by a class", () => {
    let instance;
    beforeAll(() => {
      instance = new DummyService();
    });

    describe("method get", () => {
      describe("with path given", () => {
        const mockPath = "/pa/th";

        describe("receiving successful response", () => {
          let result;
          const mockData = { key: "mock value" };
          beforeAll(async () => {
            global.fetch.mockClear();
            global.fetch.mockResolvedValue({
              ok: true,
              json: jest.fn().mockResolvedValue(mockData)
            });
            result = await instance.get(mockPath);
          });

          it("should return data", () => {
            expect(result).toEqual(mockData);
          });

          it("should request the correct URL", () => {
            expect(global.fetch).toHaveBeenCalledWith(
              "http://localhost/undefined/pa/th",
              {
                method: "GET"
              }
            );
          });
        });
      });
    });
  });
});

检查full coverage example here