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

That isn't doing anything any vanilla function wouldn't, there's no React in there; it's unclear what problem you've had testing it without Enzyme. expect(RenderIf({ isTrue: false, children [] })).toBeNull(), for example. — jonrsharpe
I'm sorry I'm taking about test it as a component, mount the component, pass the prop, with a JSX children element, and test if the children is there when is true or if false, then check is null — Rolando Niubó
Then what are you using for this in other components if not Enzyme. React Testing Library, for example? — jonrsharpe
So did you try reading the docs for the tool you're actually using? Why mention that you're not using Enzyme, rather than what you are using? — jonrsharpe

Axnyff Axnyff · Accepted Answer · 2020-07-15T17:29:23

I'd think in this case it is probably ok to test the whole html. react-testing-library wraps your content with a single div so you could something like that:

const { container } = render(<MyComponent ifTrue={false}>Content</MyComponent>);
expect(container.innerHTML).toBe('<div></div>');

If you don't like this approach, you can still render a children with a test-id / text and query it to see if it's present.

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

1 Answers