使用Jest + Enzyme访问组件的状态

Question

我有一个使用redux连接的容器类LoadingIndicator。

我试图在使用Enzyme和Jest运行计时器后测试showIndicator是否设置为true。但是我无法访问该状态并且出现错误：无法读取属性＆＃39; showIndicator＆＃39;为null

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

export class LoadingIndicator extends Component {

constructor(props) {
  super(props);
  this.timeoutID = null;
  this.state = {
    showIndicator: false,
  };
}

componentDidMount() {
   this.ensureTimer(this.props);
}

componentWillUnmount() {
   this.destroyTimer();
}

componentWillReceiveProps(props) {
  if (props.loading !== this.props.loading || props.error !== this.props.error) {
    this.ensureTimer(props);
  }
}

ensureTimer(props) {
  if (props.loading && !props.error) {
    if (!this.timeoutID) {
      this.timeoutID = setTimeout(() => {
        this.timeoutID = null;
        this.setState({ showIndicator: true });
      }, props.timeoutPeriod);
    }
  } else {
    this.destroyTimer();
  }
}

destroyTimer() {
  clearTimeout(this.timeoutID);
  this.timeoutID = null;
  this.setState({ showIndicator: false });
}

render() {
  return (
    <div className={`${this.state.showIndicator ? 'loading-show' : 'loading-hidden'}`}>
      <LoadingIndicatorComponent>
        Loading...
      </LoadingIndicatorComponent>
    </div>
  );
}

}

const mapStateToProps = (state) => ({
  loading: isLoading(state),
  error: hasError(state),
});

// timeoutPeriod of 1000 is for showing loading indicator after 1000ms
LoadingIndicator.defaultProps = {
  timeoutPeriod: 1000,
};

export default connect(mapStateToProps)(LoadingIndicator);

我的测试文件如下：

import React from 'react';
import { shallow, mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { IntlProvider, addLocaleData } from 'react-intl';
import i18nUtils from '../../i18n';

import ConnectedLoadingIndicator, { LoadingIndicator } from './loadingIndicator';

jest.useFakeTimers();

describe('Connected loading container component', () => {

  const initialState = {
    app: {
      loading: true,
      error: false
    },
  };

  const mockStore = configureStore();
  let store;
  let container;
  let component;
  let spyMount;

  const intlConfig = i18nUtils.getIntlConfig();

  beforeAll(()=> {
    spyMount = jest.spyOn(ConnectedLoadingIndicator.prototype, 
                          'componentDidMount');
    store = mockStore(initialState);
    wrapper = mount(
      <Provider store={store}>
        <IntlProvider {...intlConfig}>
          <ConnectedLoadingIndicator />
        </IntlProvider>
      </Provider>
    );
    container = wrapper.find(ConnectedLoadingIndicator);
    component = container.find(LoadingIndicator);
  });


  it('checks componentDidMount is called', () => {
    expect(spyMount).toHaveBeenCalled();
  });

  it('checks state showIndicator is called', () => {
    jest.runOnlyPendingTimers();
    console.log(wrapper.state().showIndicator);
  });

});

但是当我做console.log（组件）;我在终端获得以下信息：

ReactWrapper {
       component: null,
       root:
        ReactWrapper {
          component:

           WrapperComponent {
             props: [Object],
             context: {},
             refs: {},
             updater: [Object],
             state: [Object],
             _reactInternalInstance: [Object] },
          root: [Circular],
          node:
           Provider {
             props: [Object],
             context: {},
             refs: {},
             updater: [Object],
             store: [Object],
             _reactInternalInstance: [Object],
             state: null },
          nodes: [ [Object] ],
          length: 1,
          options: {},
          complexSelector:
           ComplexSelector {
             buildPredicate: [Function: buildInstPredicate],
             findWhereUnwrapped: [Function: findWhereUnwrapped],
             childrenOfNode: [Function: childrenOfInst] } },
node:
        LoadingIndicator {
          props:
           { loading: true,
             error: false,
             dispatch: [Function: dispatch],
             timeoutPeriod: 1000 },
          context: {},
          refs: {},
          updater:
           { isMounted: [Function: isMounted],
             enqueueCallback: [Function: enqueueCallback],
             enqueueCallbackInternal: [Function: enqueueCallbackInternal],
             enqueueForceUpdate: [Function: enqueueForceUpdate],
             enqueueReplaceState: [Function: enqueueReplaceState],

             enqueueSetState: [Function: enqueueSetState],
             enqueueElementInternal: [Function: enqueueElementInternal],
             validateCallback: [Function: validateCallback] },
          timeoutID: null,
          state: { showIndicator: true },
          _reactInternalInstance:
           ReactCompositeComponentWrapper {
             _currentElement: [Object],
             _rootNodeID: 0,
             _compositeType: 0,
             _instance: [Circular],
             _hostParent: null,
             _hostContainerInfo: [Object],
             _updateBatchNumber: null,
             _pendingElement: null,
             _pendingStateQueue: null,
             _pendingReplaceState: false,
             _pendingForceUpdate: false,
             _renderedNodeType: 0,
             _renderedComponent: [Object],
             _context: [Object],
             _mountOrder: 6,
             _topLevelWrapper: null,
             _pendingCallbacks: null,
             _calledComponentWillUnmount: false,
             _warnedAboutRefsInRender: false,
             _mountIndex: 0,
             _mountImage: null,
             _debugID: 13 } },
       nodes:
        [ LoadingIndicator {
            props: [Object],
            context: {},
            refs: {},
            updater: [Object],
            timeoutID: null,
            state: [Object],
            _reactInternalInstance: [Object] } ],
       length: 1,
       options: {},
       complexSelector:
        ComplexSelector {
          buildPredicate: [Function: buildInstPredicate],
          findWhereUnwrapped: [Function: findWhereUnwrapped],
          childrenOfNode: [Function: childrenOfInst] } }