有条件地反应测试库渲染组件

Question

我想根据条件使用反应测试库而非酶来测试组件是否渲染。

这是我的组件源代码：

{hasProperties() ? (<TargetComponent />) : null}

我如何将该条件通过测试。我尝试过的是，但是显然没有成功：

const hasProperties = () => true;
const renderOrNOt = hasProperties() ? (<TargetComponent />) : null;
const { container } = render(renderOrNOt);
expect(container.querySelector('label')).not.toBeNull();

Answer 1

您可以将其包装在返回JSX的函数中：

const hasProperties = () => true;
const RenderOrNOt = () => hasProperties() ? (<TargetComponent />) : null; // Use a function 
const { container } = render(<RenderOrNOt/>);
expect(container.querySelector('label')).not.toBeNull();

最好的方法是为条件渲染渲染容器组件，并检查TargetComponent是否在DOM中。