反应酶包装实例返回Null或undefined

Question

我正面临酶安装的问题，它返回一个空值而不是一个组件实例。我尝试了以下代码来测试组件包装器。包装实例返回null或未定义值，而不是wrapper.instance（）应该给出整个组件实例。我们还尝试了与其他组件相同的代码，它仅返回空值。我遵循了一些教程，但仍然无法正常工作。

以下是测试代码

/* 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

如果您要在className组件下寻找essential-tabs的{​​{1}}的元素，那么应该这样做。

Tabs

基本上，您必须先找到wrapper .find(Tabs) // you will need to import Tabs into your spec file .first() // similar to at(0) .find('.essential-tabs') .first() .simulate('click'); 组件，然后再查找具有该Tabs的元素。您只能在className中链接classNames和id，但不能像执行方法一样将其与组件名称链接在一起。

要访问该组件的实例，您将必须执行以下操作：

.find()