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