How to access Nested component in Enzyme React testing

Question

import React from "react";
import Adapter from "enzyme-adapter-react-16";
import { configure, shallow, mount } from "enzyme";
import Banking, { BankingForm } from './Banking';

configure({ adapter: new Adapter() });
describe('FormikHandlers', () => {
    describe('handleChange', () => {
      it('change value for firstBankName', async () => {
      const component = shallow(<Banking />);

      expect(component.find(BankingForm)).toHaveLength(1);

    });
  });
});

here I've Banking as a Parent component and bankingForm as a child component which has all the fields. I'm using formik render prop inside the Baking parent component. This test fails because I'm not able to get "BankingForm" component inside the component when it's shallowly rendered. Am I doing something wrong enyzme point of view?

Answer 1

You can either use mount to make the whole component get rendered or use dive to get one level deeper into the tree