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?

can you show your components? do you use any HOC there? besides .dive()/mount() may help I'm wondering if it's better to handle thorough better testing approach — skyboyer

Andreas Köberle Andreas Köberle · Accepted Answer · 2018-10-11T14:15:52

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

How to access Nested component in Enzyme React testing

1 Answers