React酶包装器实例返回Null或未定义。

Question

我在使用酶挂载时遇到了一个问题，它返回的是一个空值，而不是一个组件的实例。我试着用下面的代码来测试组件的wrapper。包装器实例返回的是一个空值或未定义的值，而不是wrapper.instance()应该给出整个组件的实例。我们也在其他组件上试过同样的代码，它只返回null值。我遵循了一些教程，但还是不行。

以下是测试代码

/* 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 根据 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()但你不能像你的方法那样把它和组件的名字连在一起。

而要访问组件的实例，你必须这样做。

wrapper.find(EssentialDetails).instance()