Reactjs 连接组件的React js单元测试-摩卡

我有一个智能组件，正在尝试编写单元测试（DOM测试）-得到以下错误：不确定为什么我会得到这个错误，即使我在测试中通过了道具

不变冲突：在“Connect（myComponent）”的上下文或道具中找不到“store”。或者将根组件包装到 或显式地将“存储”作为道具传递给 “连接（myComponent）”

更新的新错误：TypeError:无法读取MapStateTrops上未定义的属性“mainData”

测试代码：

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

从“React”导入React；
从“react dom”导入react dom；
从“react addons test utils”导入TestUtils；
从'react redux'导入{Provider}；
从“redux模拟存储”导入configureMockStore；
从“../../test_helper”导入{renderComponent，expect}”；
从“../../../src/containers/myComponent”导入myComponent；
描述（'myComponent'，（）=>{
const mockStore=configureMockStore（）；
让connectedApp，
商店，
初始化项目；
let组件；
让成分呈现；
在每个之前（（）=>{
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];
常量道具={
主数据：DataMock，
abc:‘def’，
子数据：{
测试：“1”，
测试：12，
},
用户ID:'1'，
日期：1月11日，
};
initialItems=['one']；
常量初始状态={
项目：初始项目
};
store=mockStore（initialState）；
组件=TestUtils.renderIntoDocument(
);
componentRender=ReactDOM.findDOMNode（组件）；
});
它（'加载'，（）=>{
期望（组件）存在；
});
});

此myComponent是哑组件的子组件

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

import React，{PropTypes，Component}来自'React'；
从'react redux'导入{connect}；
将*作为动作从“../../actions/component_actions”导入；
类myComponent扩展组件{
建造师（道具）{
超级（道具）；
此.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（）{
返回(
);
}
}
函数MapStateTops（状态）{
返回{
mainData:state.reducerName.mainData，
subDataData:state.reducerName.subDataData，
};
}
myComponent.propTypes={
主数据：PropTypes.array，
abc:PropTypes.string，
subDataData:PropTypes.object，
userID:PropTypes.string，
actioncreatorfuncone:PropTypes.func，
actioncreatorfunctwo:PropTypes.func，
日期：PropTypes.string，
};
导出默认连接（MapStateTrops，actions）（myComponent）；

错误明确指出，

MyComponent

使用

connect

从

redux

连接到商店。因此，当您使用

TestUtils.renderIntoDocument（）时

组件尝试使用redux获取需要提供的存储。您需要创建一个测试存储，以便连接的组件能够接收数据

例如：

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

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

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

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

在这里，我们将导入不带redux包装器的组件进行测试

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

供参考

注意：我们必须将所需的道具传递给组件。
感谢您的帮助，更新了我的代码，但我遇到了一个新错误-我用最新的代码更新了我的问题-TypeError:无法读取未定义的属性“mainData”，mainData是我在组件中使用的确切单词-我传递道具正确吗？@更新了答案，因为您需要redux状态中的
mainData
，所以无法将其作为
props
传递，您需要在
mockStore
中初始化它，例如：
const initialState={mainData:DataMock，userID:'1'}然后
store=mockStore（initialState）尝试过，但出现了相同的错误-我刚刚更新了myComponent-mainData的代码：state.reducerName.mainData，这里的问题是否与reducerName有关？因为错误表示组件中未定义的mainData-如何从测试用例处理此问题@monkeyjs是的，这是因为，对象是深巢。现在，如果您的
main数据
在
reducerName
中，那么请确保您的测试数据也是类似的键值结构。所以，
constinitialstate={reducerName:{mainData:DataMock}我收到错误：操作可能没有未定义的“类型”属性。你把常数拼错了吗？操作：在对象的调度（node_modules/redux mock store/lib/index.js:39:19）时未定义。actioncreatorfuncone（node_modules/redux/lib/bindActionCreators.js:7:12）-我应该这样做吗-const action={types:'ADD_ITEM'}
import { MyComponent } from '../../../src/containers/myComponent';