Реактивный тест не пройден на wrapper.instance ()

Question

Я новичок в модульном тестировании React и пытаюсь написать тест для метода компонента.

Взяв приведенный ниже пример, мне нужно написать тест для changeHandler метода ComponentA:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

class ComponentA extends Component {
    changeHandler = () => {
        // additional logic here
    }

    render() {

        return (
            <div>
                <Field
                    name='text'
                    onChange={ () => this.changeHandler() }
                    component={renderTextField}>
                </Field>
            </div>
        );
    }
}

ComponentA.contextTypes = {
    router: PropTypes.object.isRequired
}

const mapStateToProps = (state)=> ({

})

const mapDispatchToProps = (dispatch) => ({

})

export default reduxForm({
    form: 'componentForm',
})(connect(mapStateToProps, mapDispatchToProps)(ComponentA));

Вот как я пытался достичь своей цели:

import React from 'react';
import ComponentA from './ComponentA';
import { createMount } from '@material-ui/core/test-utils';
import Enzyme from 'enzyme';
import { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import configureMockStore from 'redux-mock-store';

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

describe('Component Form', () => {
  let mount, store, wrapper;

  const mockStore = configureMockStore({});
  beforeEach(() => {
    store = mockStore([]),
    mount = createMount({strict: false}),
    wrapper = shallow(<ComponentA store={store}/>).dive()
  });


  it('should change values', () => {
    wrapper.instance().changeHandler()
  });
});

Но при выполнении тестов я получаю

TypeError:wrapper.instance (...). changeHandler не является функцией`

Я не уверен, что делаю неправильно ... я что-то упустил?

Дополнительнодетали:

при использовании shallow().dive().dive().dive().dive().dive().dive().dive() появляется метод changeHandler, но я получаю undefined при выполнении console.log(wrapper.instance().changeHandler():

  ComponentA {
        props: 
         { array: 
            { insert: [Function],
              move: [Function],
              pop: [Function],
              push: [Function],
              remove: [Function],
              removeAll: [Function],
              shift: [Function],
              splice: [Function],
              swap: [Function],
              unshift: [Function] },
           anyTouched: false,
           asyncValidate: [Function],
           asyncValidating: false,
           blur: [Function],
           change: [Function],
           clearSubmit: [Function],
           destroy: [Function],
           dirty: false,
           dispatch: [Function: dispatch],
           error: undefined,
           form: 'campaign',
           handleSubmit: [Function],
           initialize: [Function],
           initialized: false,
           initialValues: undefined,
           invalid: false,
           pristine: true,
           reset: [Function],
           resetSection: [Function],
           submitting: false,
           submitFailed: false,
           submitSucceeded: false,
           touch: [Function],
           untouch: [Function],
           valid: true,
           warning: undefined,
           currentUser: { username: 'test', userId: 1 },
           codes: { bitlyCompany: [] },
           config: { classificationsPermissions: [Object] },
           codeConfiguration: { status: 'In Progress' },
           store: 
            { getState: [Function: getState],
              getActions: [Function: getActions],
              dispatch: [Function: dispatch],
              clearActions: [Function: clearActions],
              subscribe: [Function: subscribe],
              replaceReducer: [Function: replaceReducer] },
           pure: true,
           validate: [Function],
           triggerSubmit: undefined,
           autofill: [Function],
           clearFields: [Function],
           clearSubmitErrors: [Function],
           clearAsyncError: [Function],
           submit: [Function],
           storeSubscription: 
            Subscription {
              store: [Object],
              parentSub: [Object],
              onStateChange: [Function: bound onStateChange],
              unsubscribe: [Function: unsubscribe],
              listeners: [Object] },
           },
        context: { router: undefined },
        refs: {},
        updater: 
         Updater {
           _renderer: 
            ReactShallowRenderer {
              _context: [Object],
              _element: [Object],
              _instance: [Circular],
              _newState: null,
              _rendered: [Object],
              _rendering: false,
              _forcedUpdate: false,
              _updater: [Circular],
              _dispatcher: [Object],
              _workInProgressHook: null,
              _firstWorkInProgressHook: null,
              _isReRender: false,
              _didScheduleRenderPhaseUpdate: false,
              _renderPhaseUpdates: null,
              _numberOfReRenders: 0 },
           _callbacks: [] },
        changeHandler: [Function],
        setState: [Function], }

Answer 1

Было бы полезно, если бы вы могли console.log результат wrapper.instance(), чтобы мы могли видеть, что на самом деле возвращается.

Я предполагаю, что ваш компонент заключен в несколько HOC, поэтому вам следует погружаться, пока не дойдете до нужного компонента, который имеет changeHandler.

То есть он будет выглядеть как-тонапример:

wrapper = shallow(<ComponentA store={store}/>).dive().dive() // etc.

В качестве альтернативы вы можете смоделировать событие изменения на поле и использовать его для проверки вашего обработчика.Это будет выглядеть примерно так:

wrapper.find(Field).simulate('change')