如何模擬外部模塊方法？

Question

我有一個帶有函數的模塊：

const utils = {
  redirectTo(url) {
    if (url) {
      window.location = url;
    }
  },
};

export default utils;

它在 React 組件中的某個地方使用，如下所示：

import utils from '../../lib/utils';

componentWillUpdate() {
  this.redirectTo('foo')
}

現在我想檢查redirectTo被調用的值是否等於foo 。

  it('should redirect if no rights', () => {
    const mockRedirectFn = jest.fn();
    utils.redirectTo = mockRedirectFn;

    mount(
      <SomeComponent />,
    );

    expect(mockRedirectFn).toBeCalled();
    expect(mockRedirectFn).toBeCalledWith('foo');
    console.log(mockRedirectFn.mock);
    // { calls: [], instances: [] }
  });

這就是我所擁有的，但它不起作用。 我該怎么做呢？

Answer 1

你必須像這樣模擬lib/utils模塊：

import utils from '../../lib/utils';
jest.mock('../../lib/utils', () => ({
  redirect: jest.fn()
}))

it('should redirect if no rights', () => {
  mount(
    <SomeComponent />,
  );
  expect(utils.redirect).toHaveBeenCalledWith();
});

這將用只返回{redirect:jest.fn()}的模擬替換模塊。 這個模塊也被導入到你的測試中，然后你可以訪問間諜進行redirect並測試它是否使用正確的參數調用。

Answer 2

這是我最終使用的：

 it('should redirect if no rights', () => {

    // this way we mock only one method: redirectTo
    jest.mock('lib/utils', () => {
      const original = require.requireActual('lib/utils');
      original.default.redirectTo = jest.fn();
      return original;
    });

    const redirectTo = require.requireMock('lib/utils').default.redirectTo;

    mount(
      <SomeComponent />,
    );

    expect(redirectTo).toHaveBeenCalled();
  });