React 测试库 - 检查空 div 的存在

Question

我正在测试一个组件，其中 if ItemLength = 1，render返回null。

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

当我调用debug()我的测试时，它显示一个<div />. 如何检查组件在我的测试中是否返回一个空的 div？

Answer 1

您可以使用jest-dom 的toBeEmpty：

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

Answer 2

在不扩展 jest 的期望的情况下，以下内容也应该有效：

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

更新：2020年的新方式

import { screen } from '@testing-library/react';

...

render(<MyComp ItemLength={1} />);

const child = screen.queryByTestId('data-testid-attribute-value');

expect(child).not.toBeInTheDocument();

Answer 3

.toHaveLength(0) 也应该在没有 jest-dom 扩展的情况下工作

const wrapper = render(<MyComp ItemLength={1}/>);
expect(wrapper.container.innerHTML).toHaveLength(0);

Answer 4

toBeEmpty- 抛出警告，你必须toBeEmptyDOMElement使用

    const pageObject = cretePage(<UserResources />, appState);

    expect(pageObject.noContent).toBeInTheDocument();
    expect(pageObject.results).toBeEmptyDOMElement();

Answer 5

延伸之前的答案；以下内容有效，并且可能更干净一些，不依赖于data-testid或screen检查角色。

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();
  });
});