React testing library - check the existence of empty div

Question

I'm testing a component where if ItemLength = 1, render returns null.

const { container, debug } = render(<MyComp ItemLength={1} />);

When I call debug() in my test, it shows a <div />. How do I check that the component is returning an empty div in my test?

Answer 1

You can use jest-dom's toBeEmpty:

const { container } = render(<MyComp ItemLength={1} />) expect(container.firstChild).toBeEmpty() 

Answer 2

The following should work as well without extending jest's expect:

const { container } = render(<MyComp ItemLength={1} />) expect(container.firstChild).toBeNull(); 

Update: the new way in 2020

import { screen } from '@testing-library/react';  ...  render(<MyComp ItemLength={1} />);  const child = screen.queryByTestId('data-testid-attribute-value');  expect(child).not.toBeInTheDocument();