如何使用jest.mock在React中mock类组件，解决ref绑定报错问题

报错原因是普通无状态函数组件不支持直接绑定ref，可通过以下两种方案mock：

方案1：Mock为类组件（匹配原组件类型） #

直接将mock对象改为空类组件，天然支持ref绑定，适合原组件是类组件的场景：

jest.mock('./Child', () => ({
  __esModule: true,
  default: class MockChild extends React.Component {
    // 若测试需要用到原组件的实例方法，可在此处模拟
    somePublicMethod = jest.fn();
    render() {
      return <div />;
    }
  }
}));

方案2：用React.forwardRef包裹函数组件 #

如果更习惯函数组件写法，用forwardRef包裹即可让函数组件支持接收ref：

jest.mock('./Child', () => ({
  __esModule: true,
  default: React.forwardRef((props, ref) => {
    // 可根据测试需要把ref绑定到内部节点或自定义实例
    return <div ref={ref} />
  })
}));

内容的提问来源于stack exchange，提问作者Leslie Wu