Question

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

不变违规行为：无法找到＆＃34;存储＆＃34;在＆＃34; Connect（myComponent）＆＃34;的上下文或道具中。将根组件包装在中 a，或明确传递＆＃34;存储＆＃34;作为支柱＆＃34;连接（myComponent的）＆＃34;

更新了新错误：TypeError：无法读取属性＆＃39; mainData＆＃39;在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是一个哑组件的孩子

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使用connect中的redux与商店相关联。因此，当您使用TestUtils.renderIntoDocument(<myComponent {...props} />);

时

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

示例：

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添加带有连接组件的商店的提供程序。

<强>更新 Actions may not have an undefined "type" property是由于myComponent中的连接方法没有获取操作。您能否发布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包装的组件以进行测试

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

供参考Testing Redux Component

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

对连接组件的反应js单元测试 - 摩卡

2 个答案: