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

【问题标题】：react testing library render component conditionally反应测试库有条件地渲染组件
【发布时间】：2020-03-15 11:14:32
【问题描述】：

我想使用反应测试库而不是酶来测试组件是否基于条件呈现。

这是我的组件源代码：

{hasProperties() ? (&lt;TargetComponent /&gt;) : null}

我怎样才能将该条件传递给测试。我尝试的是，但显然没有成功：

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

【问题讨论】：

标签： reactjs react-testing-library

【解决方案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 中。

【讨论】：