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

Question

我有一个 React 组件，children如果 propisTrue是 true-y，它会返回由 React 渲染的组件。如果其 propisTrue为 false-y，则组件返回null，并且 React 不会渲染任何内容。

我需要将它作为一个组件进行测试，安装它，传递 prop，并测试当 prop 为 true-y 时它的子级是否被渲染，或者当prop 为 false-yisTrue时我们得到渲染。nullisTrue

这是我的组件：

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

Answer 1

const { container } = render(<RenderIf isTrue={false}>Content</RenderIf>)

expect(container).toBeEmptyDOMElement()

Answer 2

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

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

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

Answer 3

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