reactjs - 单元测试 TypeError：_reactRouterDom.useHistory.mockReturnValue 不是函数

Question

我尝试使用打字稿实现的反应组件编写单元测试，但是在模拟某些钩子函数时出现错误。

我的单元测试工具：

import React from 'react';
import { useHistory } from 'react-router-dom';
import { MyComponent } from './index';
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
useHistory: () => ({ replace: jest.fn() ]),
}));

describe('MyComponent', () => {
it('Should pass', () => {
  // My render implementation
  (useHistory as jest.Mock).mockReturnValue({ pathname: '/test' });
});
});

当我运行测试用例时，它会抛出一个错误：

TypeError：_reactRouterDom.useHistory.mockReturnValue 不是函数

标签： reactjstypescriptunit-testingreact-routerreact-router-dom

Answer 1

您已经分配了一个匿名函数，useHistory而不是由jest.fn(). .mockReturnValue()方法存在于jest.fn(). 尝试：

import { useHistory } from 'react-router-dom';

jest.mock('react-router-dom', () => ({
  ...(jest.requireActual('react-router-dom') as object),
  useHistory: jest.fn(),
}));

describe('MyComponent', () => {
  test('should pass', () => {
    (useHistory as jest.Mock).mockReturnValue({ location: { pathname: '/test' } });
    const history = useHistory();
    expect(history.location.pathname).toBe('/test');
  });
});