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

Question

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

这是我的组件源代码：

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

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

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

Answer 1

你可以将它包装在一个函数中 returns JSX:

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

尽管最好的方法是为条件渲染渲染容器组件并检查 TargetComponent 是否在 DOM.

中

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

react testing library render component conditionally

reactjs

react-testing-library