Javascript 包装器上的React测试失败。实例（）

我是React单元测试的新手，我正在尝试为组件方法编写一个测试

以下面的示例为例，我需要为

组件a

的

changeHandler

方法编写一个测试：

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));

---

如果您可以

console.log

查看

wrapper.instance（）

的结果，这样我们就可以看到实际返回的内容

我的猜测是，您的组件被包装在多个HOC中，这就是为什么您应该潜入，直到找到具有

changeHandler

的正确组件

意思是它看起来像这样：

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

---

我已经用控制台日志更新了这个问题。试图查找字段，但它不返回任何元素。…@Valip看起来您需要另一次潜水，您能否尝试添加潜水，直到在输出中获得正确的组件？如果您想使用

.find

路径，可以尝试使用

.mount

而不是

.shallow

来呈现整个树。使用下面7个dive，它返回

TypeError:无法读取null/unefined

的属性“changeHandler”，在7个dive上它只显示

包装器的
未定义的
实例（）.changeHandler（）
似乎
changeHandler
显示了7次潜水，但不确定为什么在尝试调用时未定义it@Valip我想说的是，很高兴它最终成功了，我将更新我的答案，以更好地反映最终的解决方案
  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], }

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

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