我可以监视 object 而不是 object 方法吗？

Question

我知道当我引用 object 时，我可以使用如下所示的 spy 来跟踪调用 function 的次数。

jest.spyOn(myObj, 'myFunc')

但是，当我引用了我想使用的 function 时，我该怎么办？ jest.spyOn(myFunc)不起作用

为了澄清，我想使用 function 的实际实现。 我只是想看看它被调用了多少次以及使用了哪个 arguments。

当我尝试在普通的 function 上看到这些东西时，我得到：

  expect(received).toHaveBeenCalledWith(...expected)
Matcher error: received value must be a mock or spy function

这是（大部分）实际测试：

  it('should set createScrollContextImmediately when result is above the maximum return limit', async () => {
    // Arrange
    ...
    // Act
    await fetch(imageID, { size: maxSizePerScroll }, ids, { createScrollContextImmediately: false });
    // Assert
    expect(fetch).toHaveBeenCalledWith(imageID, { size: maxSizePerScroll }, ids, { createScrollContextImmediately: false });
    expect(fetch).toHaveBeenCalledWith(imageID, { size: maxSizePerScroll }, ids, { createScrollContextImmediately: true });
    expect(fetch).toHaveBeenCalledTimes(2);
  });

Answer 1

选项 1。您可以使用jest.mock和实际实现来模拟fetch function。 而且，我们可以在实现中添加一个间谍。 您可以为该间谍做出断言。

例如

fetch.ts ：

export async function fetch(name) {
  return 'real implementation';
}

fetch.test.ts ：

import { fetch } from './fetch';

const fetchSpy = jest.fn();

jest.mock('./fetch', () => {
  const { fetch } = jest.requireActual('./fetch');
  const fetchWithSpy = jest.fn().mockImplementation((...args) => {
    fetchSpy(...args);
    return fetch(...args);
  });
  return {
    fetch: fetchWithSpy,
  };
});

describe('65266282', () => {
  it('should set createScrollContextImmediately when result is above the maximum return limit', async () => {
    const actual = await fetch('teresa teng');
    expect(actual).toBe('real implementation');
    expect(fetchSpy).toBeCalledWith('teresa teng');
    expect(fetchSpy).toHaveBeenCalledTimes(1);
  });
});

测试结果：

PASS  examples/65266282/fetch.test.ts
  65266282
    ✓ should set createScrollContextImmediately when result is above the maximum return limit (8 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.216 s

选项 2。您可以使用Proxy为您的fetch function 创建一个代理。

代理 object 使您能够为另一个 object 创建代理，它可以拦截和重新定义该 object 的基本操作。

fetch-v2.test.ts ：

import { fetch } from './fetch';

const fetchSpy = jest.fn();
const fetchProxy = new Proxy(fetch, {
  apply: (target, thisArg, argumentsList) => {
    fetchSpy.apply(thisArg, argumentsList);
    return target.apply(thisArg, argumentsList);
  },
});

describe('65266282', () => {
  it('should set createScrollContextImmediately when result is above the maximum return limit', async () => {
    const actual1 = await fetchProxy('teresa teng');
    expect(actual1).toBe('real implementation');
    const actual2 = await fetchProxy('best singer');
    expect(actual2).toBe('real implementation');
    expect(fetchSpy).toBeCalledWith('teresa teng');
    expect(fetchSpy).toBeCalledWith('best singer');
    expect(fetchSpy).toHaveBeenCalledTimes(2);
  });
});

测试结果：

 PASS  examples/65266282/fetch-v2.test.ts
  65266282
    ✓ should set createScrollContextImmediately when result is above the maximum return limit (3 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.484 s

这两种方法本质上是一样的。 核心思想是使用代理、拦截器、高阶function