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?
Update
Use toBeEmptyDOMElement since toBeEmtpy has been deprecated.
You can use jest-dom's toBeEmpty:
const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeEmpty()
toBeNull() or toBeFalsy() is what I would use, now that toBeEmpty is deprecatedThe 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();
data-testid attribute. Ideally you should be querying an element by accessibility related attributes, e.g. screen.queryByRole, screen.queryByText or other query documented here.
document.querySelector('.yourClassName')..toHaveLength(0) should also work without jest-dom extension
const wrapper = render(<MyComp ItemLength={1}/>);
expect(wrapper.container.innerHTML).toHaveLength(0);
toBeEmpty - throw warning, you must use toBeEmptyDOMElement instead
const pageObject = cretePage(<UserResources />, appState);
expect(pageObject.noContent).toBeInTheDocument();
expect(pageObject.results).toBeEmptyDOMElement();
To extend off the previous answers; the following works and is probably a bit cleaner with no dependence on the data-testid or screen to check for roles.
import { render } from "@testing-library/react";
// Components
import { YourComponent } from "<Path>/YourComponent";
describe("YourComponent", () => {
it("component should be an empty element", () => {
const { container } = render(<YourComponent />);
expect(container).toBeEmptyDOMElement();
});
it("component should not be an empty element", () => {
const { container } = render(<YourComponent />);
expect(container).not.toBeEmptyDOMElement();
});
});
You can use js-dom's toBeEmptyDOMElement method. https://github.com/testing-library/jest-dom#tobeemptydomelement
Before you can use toBeEmptyDOMElement you will need to install jest-dom and set up jest. https://github.com/testing-library/jest-dom#usage
const { container } = render(<MyComp ItemLength={1} />)
expect(container.firstChild).toBeEmptyDOMElement()
Note: toBeEmpty method is being deprecated and its suggested to use toBeEmptyDOMElement
TypeError: expect(...).toBeEmptyDOMElement is not a function
yarn add --dev @testing-library/jest-dom
@testing-library/jest-dom if you are a React Native developer. In this case, you can use toJSON, e.g. expect(toJSON()).toBeNull()Since you are trying to test for empty div, one way you could try to test it is by matching node (another possible solution is number of nodes rendered)
getByText(container, (content, element) => element.tagName.toLowerCase() === 'div')
container in throws error since it expects a string
getByText(container, (content, element) => element.tagName.toLowerCase() === 'div')try using getByText to match element TagName