React 测试库 - 检查是否存在空 div

Question

我正在测试一个组件，如果 ItemLength = 1、render returns null.

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

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

Answer 1

由于您正在尝试测试空 div，您可以尝试通过匹配节点来测试它的一种方法（另一种可能的解决方案是呈现的节点数）

getByText(container, (content, element) => element.tagName.toLowerCase() === 'div')

Answer 2

您可以使用 jest-dom's toBeEmpty:

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

Answer 3

以下内容在不扩展 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 4

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

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

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

Answer 5

.toHaveLength(0) 也应该在没有 jest-dom extension

的情况下工作

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

Answer 6

可以使用js-dom的toBeEmptyDOMElement方法。 https://github.com/testing-library/jest-dom#tobeemptydomelement

在使用 toBeEmptyDOMElement 之前，您需要安装 jest-dom 并设置 jest。 https://github.com/testing-library/jest-dom#usage

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

注意：toBeEmpty 方法已被弃用，建议使用 toBeEmptyDOMElement

React 测试库 - 检查是否存在空 div

React testing library - check the existence of empty div

reactjs

react-testing-library