React enzyme wrapper instance returning Null or undefined

Question

I am facing the issue with the enzyme mount it's returning a null value instead of an instance of a component. I tried the following code for testing the component wrapper. And wrapper instance is returning null or undefined value instead of wrapper.instance() should give the whole component instance. We have tried the same code with other components also, it returns null values only. I followed some tutorial but still not working.

Following is the test code

/* eslint-disable @typescript-eslint/camelcase */
import React from 'react';
import Enzyme, { shallow, mount } from 'enzyme';
import EssentialDetails from '../essentialDetails';
import { BrowserRouter as Router } from 'react-router-dom';
import configureStore from 'redux-mock-store'; //ES6 modules
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import Adapter from 'enzyme-adapter-react-16';


Enzyme.configure({
  adapter: new Adapter()
});

const setUp = (initprops: any, propsstore: any) => {
  const wrapper = mount(
    <Provider store={propsstore}>
      <Router>
        <EssentialDetails {...initprops} />
      </Router>
    </Provider>
  );
  return wrapper;
};

describe('essentialdetails-main', () => {
  const myMock = jest.fn();
  const middlewares = [thunk];
  const mockStore = configureStore(middlewares);
  const initialState = {
    profileInfo: {
      id: 1,
      documents: {
        id: 1,
        file_type_id: 1,
        file_type: 'string',
        file_path: 'string'
      },
      panDetails: {
        pan: 'string',
        panUrl: 'string',
        isCompany: true
      },
      personalDetails: {
        firstName: 'string',
        lastName: 'string',
        middleName: 'string',
        pan: 'string',
        dob: 'string',
        doi: 'string',
        salutation: 'string',
        cin: 'string',
        companyName: 'string'
      },
      billingAddress: {
        addressLine1: 'string',
        addressLine2: 'string',
        addressLine3: 'string',
        pin: 1,
        city: 'string',
        stateId: 1,
        countryId: 1,
        gst: 'string'
      },
      bankDetails: {
        bankName: 'string',
        accountName: 'string',
        accountNumber: 'string',
        accountTypeId: 'string',
        accountstatus: 'string',
        ifsc: 'string',
        micr: 'string'
      }
    },
    dropDownData: {
      salutations: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      accountStatus: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      bankAccountTypes: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      banks: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      states: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      countries: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      entityTypes: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      fileTypes: [
        {
          name: 'string',
          id: 1,
          description: 'string',
          extension: 'string'
        }
      ],
      entityType: 'string',
      // form: WrappedFormUtils,
    },
    saveProfileDataAction: ()=>console.log(),
    getSubscriber: ()=>console.log(),
    onClose: ()=>console.log(),
  };
  const propsstore = mockStore(initialState);
  let wrapper: any, instancewrapper: any;
  beforeEach(() => {
    wrapper = setUp(initialState,propsstore);
    instancewrapper = wrapper.instance();
  });
  describe('simulation-essentialdetails',()=>{
    it('tabonclick',()=>{
      // console.log('------------------------------------------------------------------');
      wrapper
        .find('Tabs.essential-tabs')
        .at(0)
        .simulate('click');
      console.log(wrapper.instance());
    });
  });
  it('should render correctly', () => {
    const tree = wrapper.debug();
    expect(tree).toMatchSnapshot();
  });
});

Answer 1

If you are looking for an element with the className of essential-tabs under the Tabs component, this is what you should be doing instead.

wrapper
  .find(Tabs) // you will need to import Tabs into your spec file
  .first() // similar to at(0)
  .find('.essential-tabs')
  .first()
  .simulate('click');

Basically, you will have to find the Tabs component first, before you look for the element with that className. You can only chain classNames and ids in .find(), but you can't chain it together with the name of the components like the way you did it.

And to access the instance of the component, you will have to do this:

wrapper.find(EssentialDetails).instance()