用于连接组件的 React js 单元测试 - mocha

Question

我有一个智能组件，正在尝试编写单元测试（DOM 测试） - 收到以下错误：不知道为什么我会收到此错误，即使我在测试中传递了道具..？

Invariant Violation：在“Connect(myComponent)”的上下文或道具中找不到“store”。要么将根组件包装在 a ，或显式将“store”作为道具传递给 “连接（我的组件）”。

更新了新错误：TypeError: Cannot read property 'mainData' of undefined at mapStateToProps

测试代码：

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { renderComponent, expect } from '../../test_helper';
import myComponent from '../../../src/containers/myComponent';


describe('myComponent', () => {
  const mockStore = configureMockStore();
  let connectedApp,
    store,
    initialItems;
  let component;
  let componentRender;

  beforeEach(() => {
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
      0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 
      2, 0, 0, 0, 0, 0];

    const props = {
      mainData: DataMock,
      abc: 'def',
      subData: {
        test: '1',
        testing: 12,
      },
      userID: '1',
      Date: 'jan11',
    };

    initialItems = ['one'];
    const initialState = {
      items: initialItems
    };

    store = mockStore(initialState);

    component = TestUtils.renderIntoDocument(
      <Provider store={store}><myComponent {...props} /></Provider>);

    componentRender = ReactDOM.findDOMNode(component);
  });

  it('loads', () => {
    expect(component).to.exist;
  });
});

这个 myComponent 是一个哑组件的子组件

我的组件代码：

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/component_actions';

class myComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      someString: 'abc',
      someotherstring: 'def',
    };
  }

  componentDidMount() {
    const { test1, test2, test3 } = this.props;
    this.props.fetchEntriesDefault(test1, test2, test3);
    this.props.fetchAnalyticsMainView(test1, test2, test3);
  }

render() {
    return (
      <div className="container">
     </div>
   );
  }
 }


    function mapStateToProps(state) {
      return {
        mainData: state.reducerName.mainData,
        subDataData: state.reducerName.subDataData,
      };
    }
    myComponent.propTypes = {
      mainData: PropTypes.array,
      abc: PropTypes.string,
      subDataData: PropTypes.object,
      userID: PropTypes.string,
      actioncreatorfuncone: PropTypes.func,
      actioncreatorfunctwo: PropTypes.func,
      date: PropTypes.string,
    };

    export default connect(mapStateToProps, actions)(myComponent);

Answer 1

错误清楚地表明，MyComponent 使用来自redux 的connect 连接到商店。因此，当您使用TestUtils.renderIntoDocument(<myComponent {...props} />);

组件尝试使用 redux 来获取需要提供的 store。您需要创建一个测试存储，以便您连接的组件接收减速器。

例子：

import React from 'react';
import ReactDOM from 'react-dom';

// IMPORTANT
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';

import TestUtils from 'react-addons-test-utils';
import { renderComponent, expect } from '../../test_helper';
import MyComponent from '../../../src/containers/myComponent';    

describe('myComponent', () => {
  var mockStore = configureMockStore();
  var connectedApp, store, initialItems;
  let component;
  let componentRender;

  beforeEach(() => {
    const DataMock = [1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 
      0, 0, 0, 1, 2, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 
      0, 1, 2, 0, 0, 0, 0, 0
    ];

    const initialState = {
      mainData: DataMock,
      userID: '1'
    };

    store = mockStore(initialState);
  });

  describe('state provided by the store', function() {
    beforeEach(function() {

      component = TestUtils.renderIntoDocument(
        <Provider store={store}><MyComponent /></Provider>);

      componentRender = ReactDOM.findDOMNode(component);
    });

    it('loads', () => {
      expect(component).to.exist;
    });
  });
});

这样，你需要为一个带有redux的连接组件添加provider和store。

更新 Actions may not have an undefined "type" property 是因为在myComponent 中，connect 方法没有执行操作。您能否将您的整个代码发布为myComponent？需要添加的操作？动作应该是像这样的字典：

类似这个例子：

import { connect } from 'react-redux'
import { login } from '../actions/creators/userActionCreators'

function mapStateToProps(state) {
  return {
    mainData: state.reducerName.mainData,
    subDataData: state.reducerName.subDataData,
  };
}

const mapDispatchToProps = (dispatch) => {
   return {
      onSubmitLogin: (id, pass) => dispatch(login(id, pass))
   }
};

// `LoginForm` is being passed, so it would be the "container"
// component in this scenario
export default connect(mapStateToProps, mapDispatchToProps)(myComponent);

Answer 2

我正在做的一种方法是单独导出组件以进行如下测试。

export class MyComponent extends Component {
  // your stuff here
} 

export default connect(mapStateToProps, actions)(MyComponent);

这里我们将导入没有redux wrapper的组件进行测试

import { MyComponent } from '../../../src/containers/myComponent'; 

供参考Testing Redux Component

注意：我们必须将所需的道具传递给组件。