Search code examples
reactjsreact-nativejestjsenzymechildren

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


I have a component with which I wrap all my screens:

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;

I'm currently writing it's unit tests. I would like to test if this component renders its children. How can I do this?

Here is the code that I've written (but even though the component works, the test does not pass):

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

How could I write a test that checks if the component renders it's children?

EDIT: Through the answer from eramit I implemented this check like this:

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

Solution

  • You could create some test child div and check.

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

    });