How can I check if element does not exist in a React test?

Question

I want to test that on initial render of the parent component, there are no child components rendered in the document.

On every press of the button, the parent component generates a child component within it. On init, the child component array is empty. I therefore expect my child componet test-id to be null on initial render, when I render my parent component.

Parent component:

const ParentComponent = () => {

  const [childComponentsArray, setChildComponentsArray] = useState([]);

  const createChildComponent = () => {
    const objToAdd = {
      // Generate uuid for each component
      uuid: uuid()
    };

    setChildComponentsArray([...childComponentsArray, objToAdd]);
  };

  return (
    <div>
      {childComponentsArray.length > 0 && <div>
        {childComponentsArray.map(() => {
          return <div className={'child-item'}>
            <ChildComponent />
          </div>;
        })}
      </div>}

      <ButtonContainer variant={'secondary'} label={'+ ' + component.addLabel}
                       onClick={() => createChildComponent()}
                       />
    </div>
  );
};

Child component:


const ChildComponent = () => {

return (
<div data-testid={'childComponentTestId'}>
<p> I'm in child component! </p>
</div
)
}

Unit test:

test('on render, no child items are visible', () => {

  render(
    <RecoilRoot>
      <ParentComponent />
    </RecoilRoot>
  )

  expect(screen.getByTestId('childComponentTestId')).toBeNull();

});

When executing my test I get the following error in my unit test:

TestingLibraryElementError: Unable to find an element by: [data-testid="childComponentTestId"]

I find this error a bit of a paradox, since that is exactly what I want it to be.

note Passing the data-testid as a prop does not help. Using .not.toBeInDocument() does not work. Using .toBeUndefined() does not work either.

Marlaurita · Accepted Answer · 2024-08-15 17:12:14Z

2

You should use queryByTestId as it returns null if object is not found. See more on the documentation site.

ex: expect(queryByTestId('childComponentTestId')).toBe(null);

edited Aug 15, 2024 at 17:12

Marlaurita

6054 gold badges13 silver badges27 bronze badges

answered Sep 19, 2022 at 11:38

Andrei Belokopytov

1,0818 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I check if element does not exist in a React test?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related