reactjs - 无法使用 React 测试库测试包含钩子的 HOC

Question

以下是 HOC 的代码

const HOC = ({ component: Component }) => {
  return () => {
     const id = useQuery(query);
     return (<div> 
         {!id ? ( <SomeOtherComponent prop1={'hello'} prop2={'world'} /> ) : ( <Component /> )}
     </div>)
  }
}

下面是渲染 HOC 的测试-

const myComponent = () => <div data-testid={'component-testid'}>ABC</div>;
    const renderHOC = HOC({component: myComponent})();
    const {getByTestId} = render(renderHOC);
    expect(getByTestId('component-testid')).toBeInTheDocument();

获取错误-无效的挂钩调用。必须在反应功能组件内调用反应钩子。

标签： reactjsreact-hookshigher-order-functionsreact-testing-library

Answer 1

应该如下

const RenderHOC = HOC({component: myComponent});
const { getByTestId } = render(<RenderHOC />);

如果组件包含挂钩，则不能将组件作为函数调用。