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

bnl4lu3b 于 2023-02-10 发布在 Jest

关注(0)|答案(4)|浏览(205)

我有一个React组件，如果prop isTrue是truth-y，则返回要由React渲染的children。如果prop isTrue是false-y，则该组件返回null，React不渲染任何内容。
我需要将其作为一个组件进行测试，挂载它，传递prop，并测试当prop isTrue为truth-y时，是否会呈现它的子对象，或者当isTrue为false-y时，是否会得到null。
以下是我的组件：

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

jestjs

来源：https://stackoverflow.com/questions/62919547/how-to-test-if-react-component-is-returning-null-or-its-children-using-react-tes

4条答案

按热度按时间

5jvtdoz21#

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

expect(container).toBeEmptyDOMElement()

赞(0）回复(0）举报 2023-02-10

9ceoxa922#

我认为在这种情况下，测试整个html可能是可以的。react-testing-library用一个div Package 你的内容，这样你就可以做类似这样的事情：

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

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

赞(0）回复(0）举报 2023-02-10

gz5pxeao3#

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

赞(0）回复(0）举报 2023-02-10

8zzbczxx4#

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

赞(0）回复(0）举报 2023-02-10

我来回答

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

4条答案

相关问题

热门标签

最新问答