我一直在尝试使用 来呈现组件shallow，该组件由enzyme.

该组件正在使用useHistoryfrom react-router-dom。

const baseMatch: match<{ id: string }> = { /* path, url, params */};
const location = createLocation(baseMatch.url);

describe('MyComponent', () => {
  const baseProps = {
    history: createMemoryHistory(),
    location: createLocation(baseMatch.url),
    match: baseMatch
  };

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

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

  it('renders blah blah', () => {
    const wrapper = shallow(<MyComponent {...baseProps} />);
    // testing MyComponent here...
  });

我参考了这篇文章，并jest.mock以同样的方式放置。

然而，这导致TypeError: Cannot read property 'history' of undefined.

控制台说：

MyComponent › renders blah blah

    TypeError: Cannot read property 'history' of undefined

      24 | const MyComponent = (props: IProps) => {
      25 |   console.log('useHistory', useHistory);
    > 26 |   let history = useHistory();

奇怪的是，console.log上面的第 25 行打印了useHistory(换句话说，它不是未定义的) 的实现。

显然，useHistory没有被嘲笑。我怀疑这useHistory不能被嘲笑shallow（在上面的帖子中，海报使用的是mount()）。

不过，我不是100％肯定，因为我无法找到，如果shallow是兼容useHistory的的文档或不enzyme和react-router。

是否有可能使用shallow与useHistory？任何建议将被认真考虑。