CODEWITHSUNDEEP
reactjsunit-testingjestjsenzymeformik
Pavan
Pavan

Reputation: 1015

How to access Nested component in Enzyme React testing

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?

Upvotes: 3

Views: 4435

Answers (1)

Andreas K&#246;berle
Andreas K&#246;berle

Reputation: 110892

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

Upvotes: 4

Related Questions