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();

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

Answer 1

应该如下

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

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

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

1 个答案: