How to test if React component is returning null or its children using React Testing Library?

Question

I have a React component that returns its children to be rendered by React if the prop isTrue is truth-y. If its prop isTrue is false-y, then the component returns null, and React doesn't render anything.

I need to test it as a component, mount it, pass the prop, and test if it's children is getting rendered when the prop isTrue is truth-y, or we are getting null if isTrue is false-y.

Here is my component:

const RenderIf = ({ isTrue, children }) => {
    if (isTrue) {
        return children;
    }
    return null;
}
export default RenderIf

Answer 1

const { container } = render(<RenderIf isTrue={false}>Content</RenderIf>)

expect(container).toBeEmptyDOMElement()