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

Asked 15/7, 2020 at 16:31 Answered 28/8, 2023 at 22:45

Solved javascript reactjs jestjs react-testing-library

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

Messenia answered 15/7, 2020 at 16:31 Comment(5)

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. – Talbot 15/7, 2020 at 16:33

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 – Maisel 15/7, 2020 at 16:52

Then what are you using for this in other components if not Enzyme. React Testing Library, for example? – Talbot 15/7, 2020 at 16:53

Yes they are using react testing library – Maisel 15/7, 2020 at 16:56

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? – Talbot 15/7, 2020 at 16:57

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.

Analcite answered 15/7, 2020 at 17:29 Comment(0)

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

expect(container).toBeEmptyDOMElement()

Sublett answered 31/3, 2022 at 13:48 Comment(3)

Note that container is obtained as shown in the other answers: const {container} = render(<></>) – Avlona 10/11, 2022 at 14:30

This needs more explaination. I just get "property 'toBeEmptyDOMElement' does not exist on type 'JestMatchers<string>" – Jackelinejackelyn 1/8, 2023 at 8:42

You must use container in this scenario. The global screen will have content like <body> <div/> </body> – Mundford 16/4 at 17:29

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.

Analcite answered 15/7, 2020 at 17:29 Comment(0)

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
//...

describe('TestHistory', () => {
  it('should render nothing if there are no history entries', () => {
    // ARRANGE
    // ACT
    const { container } = render(
      <TestHistory version={1} versionHistory={[]} datasetType={DatasetType.VALIDATION} />,
    );

    // ASSERT
    expect(container).toBeEmptyDOMElement();
  });
});

Chaunceychaunt answered 21/4, 2022 at 20:42 Comment(0)

expect(container.innerHTML).toEqual('');

Bertrand answered 11/9, 2022 at 13:19 Comment(1)

Your answer needs some expalination. – Bonine 12/9, 2022 at 4:14

@ecraig12345 solution will work fine for web. This will work for both web and react-native:

const { toJSON } = render(<RenderIf isTrue={false}>Content</RenderIf>);
expect(toJSON()).toBeNull();

A better solution, if we follow @testing-library principles, we should test the way an user would test the UI:

const mockContent = 'mockContent';
const { queryByText } = render(<RenderIf isTrue={false}>{mockContent}</RenderIf>);
expect(queryByText(mockContent)).toBeNull(); // use screen.queryByText() for Web

Arronarrondissement answered 28/8, 2023 at 22:45 Comment(1)

It works for React Native – Pinsk 7/3 at 8:33

Recommended topics

Hot tags