如何在 Jest 测试中监视传递给 react 组件的函数？

问题描述

当 jest.fn 传递给组件 props 时，我似乎无法监视它：

interface MyComponentProps {
  testFunction: () => void
}

class MyComponent extends React.Component<MyComponentProps> {
  constructor(props) {
    super(props);
    props.testFunction()
  }

  render() {
    return <></>
  }
}

测试：

import '@testing-library/jest-dom';

import { render,screen } from '@testing-library/react';
import { MyComponent } from './MyComponent'
test('Function is called by my component',() => {
  
  const mockTestFunction = jest.fn();
  
  render(<MyComponent
    testFunction={mockTestFunction}
  />)

  expect(mockTestFunction).toHaveBeenCalled();
});

测试输出：

 expect(jest.fn()).toHaveBeenCalled()

    Expected number of calls: >= 1
    Received number of calls:    0

根据我阅读过的许多来源（例如 https://blog.sapegin.me/all/react-testing-3-jest-and-react-testing-library/），我希望这能正常工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）