如何使用 React 测试库测试 React 组件是否返回 null 或其子级？

Question

我有一个 React 组件，如果 prop isTrue是真值，则返回其children级以由 React 呈现。 如果它的 prop isTrue为 false-y，则组件返回null ，并且 React 不会渲染任何内容。

我需要将它作为一个组件进行测试，安装它，传递道具，并测试当道具isTrue为真值时它的子项是否正在渲染，或者如果isTrue为假值，我们将得到null 。

这是我的组件：

const RenderIf = ({ isTrue, children }) => {
    if (isTrue) {
        return children;
    }
    return null;
}
export default RenderIf

Answer 1

expect(container).toBeEmptyDOMElement()

Answer 2

import React from 'react'; import { render } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; //... describe('TestHistory', () => { it('should render nothing if there are no history entries', () => { // ARRANGE // ACT const { container } = render( <TestHistory version={1} versionHistory={[]} datasetType={DatasetType.VALIDATION} />, ); // ASSERT expect(container).toBeEmptyDOMElement(); }); });

Answer 3

我认为在这种情况下，测试整个 html 可能是可以的。 react-testing-library 用一个 div 包装你的内容，所以你可以这样：

const { container } = render(<MyComponent ifTrue={false}>Content</MyComponent>);
expect(container.innerHTML).toBe('<div></div>');

如果您不喜欢这种方法，您仍然可以使用 test-id / text 渲染一个孩子并查询它以查看它是否存在。

Answer 4

expect(container.innerHTML).toEqual('');