React / React Native + Enzyme：如何测试组件是否呈现它的子组件？

Question

我有一个组件可以包裹我的所有屏幕：

import React from "react";
import { SafeAreaView } from "react-native";
import { PropTypes } from "prop-types";

import styles from "./styles";

const SafeContainer = ({ children }) => {
  return <SafeAreaView style={styles.container}>{children}</SafeAreaView>;
};

SafeContainer.propTypes = {
  children: PropTypes.any
};

export default SafeContainer;

我目前正在编写它的单元测试。我想测试这个组件是否渲染它的子组件。我该怎么做？

这是我编写的代码（但即使组件有效，测试也没有通过）：

import React from "react";
import { shallow } from "enzyme";
import SafeContainer from "./SafeContainer";

describe("SafeContainer", () => {
  describe("rendering", () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<SafeContainer />);
    });

    it("should render a <SafeAreaView />", () => {
      expect(wrapper.find("SafeAreaView")).toHaveLength(1);
    });

    it("should render its children", () => {
      expect(wrapper.children()).toEqual(wrapper.props().children);
    });
  });
});

我如何编写一个测试来检查组件是否呈现它的子组件？

编辑： 通过 eramit 的回答，我实现了这样的检查：

describe("SafeContainer", () => {
  describe("rendering", () => {
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(
        <SafeContainer>
          <View className="Test" />
        </SafeContainer>
      );
    });

    it("should render a <SafeAreaView />", () => {
      expect(wrapper.find("SafeAreaView")).toHaveLength(1);
    });

    it("should render its children", () => {
      expect(wrapper.find(".Test")).toHaveLength(1);
    });
  });
});

Answer 1

您可以创建一些测试子 div 并检查。

describe("SafeContainer", () => {
  describe("rendering", () => {
    let wrapper;
    beforeEach(() => {
      const TestComponent = <SafeContainer><div className="Test"/></SafeContainer> 
      wrapper = mount(<TestComponent />);
    });

    it("should render a <SafeAreaView />", () => {
      expect(wrapper.find("SafeAreaView")).toHaveLength(1);
    });

    it("should render its children", () => {
      expect(wrapper.find(".Test")).toHaveLength(1);
    });
  });

});

React / React Native + Enzyme：如何测试组件是否呈现它的子组件？

React / React Native + Enzyme: How to test if a component renders it's children?

children

reactjs

jestjs

react-native

enzyme