CODEWITHSUNDEEP
reactjsreact-testing-library
alex
alex

Reputation: 335

react testing library render component conditionally

I want to test if a component renders or not based on a condition using the react testing-library not enzyme.

This is my component source code:

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

How can I pass that condition to a test. What I tried is that but obviously without success:

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

Upvotes: 1

Views: 3613

Answers (1)

Clarity
Clarity

Reputation: 10873

You can wrap it in a function that returns JSX:

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

Altho the best way would be to render the container component for your conditional rendering and check if TargetComponent is in the DOM.

Upvotes: 2

Related Questions