Question

我已经粘贴了下面非常非常基本的组件。安装Component时，它基本上会调用fetchMessage Action，它会从API返回一条消息。该消息将在state.feature.message函数中设置为mapStateToProps。

我完全不知道从哪里开始测试这个组件。我知道我想测试一下：

1）渲染要素组件

2）fetchMessage中的props函数称为

3）使用

呈现时，它显示或具有正确的message属性

我已尝试设置我的测试文件，如下所示，但我发现错误时我最终会遇到重复错误。

有人能指出我正确的方向吗？

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

class Feature extends Component {
  static propTypes = {
    fetchMessage: PropTypes.func.isRequired,
    message: PropTypes.string
  }

  componentWillMount() {
    this.props.fetchMessage();
  }

  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}

function mapStateToProps(state) {
  return { message: state.feature.message };
}

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

测试文件：

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import expect from 'expect';
import { shallow, render, mount } from 'enzyme';
import React from 'react';
import sinon from 'sinon';

import Feature from '../index';

const mockStore = configureStore([thunk]);

describe('<Feature />', () => {
  let store;

  beforeEach(() => {
    store = mockStore({
      feature: {
        message: 'This is the message'
      }
    });
  });

  it('renders a <Feature /> component and calls fetchMessage', () => {
    const props = {
      fetchMessage: sinon.spy()
    };

    const wrapper = mount(
      <Provider store={store}>
        <Feature {...props} />
      </Provider>
    );

    expect(wrapper.find('Feature').length).toEqual(1);
    expect(props.fetchMessage.calledOnce).toEqual(true);
  });
});

Answer 1

测试连接的React组件

对连接和未连接的组件版本使用单独的导出。

将未连接的组件导出为命名导出，并将连接导出为默认导出。

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

// export the unwrapped component as a named export
export class Feature extends Component {
  static propTypes = {
    fetchMessage: PropTypes.func.isRequired,
    message: PropTypes.string
  }

  componentWillMount() {
    this.props.fetchMessage();
  }

  render() {
    return (
      <div>{this.props.message}</div>
    );
  }
}

function mapStateToProps(state) {
  return { message: state.feature.message };
}

// export the wrapped component as a default export
export default connect(mapStateToProps, actions)(Feature);

请记住连接的组件必须包含在提供程序组件中，如下所示。

虽然可以单独测试未连接的组件，因为他们不需要了解Redux存储。

测试文件：

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import expect from 'expect';
import { shallow, render, mount } from 'enzyme';
import React from 'react';
import sinon from 'sinon';

// import both the wrapped and unwrapped versions of the component
import ConnectedFeature, { feature as UnconnectedFeature } from '../index';

const mockStore = configureStore([thunk]);

describe('<Feature />', () => {
  let store;

  beforeEach(() => {
    store = mockStore({
      feature: {
        message: 'This is the message'
      }
    });
  });

  it('renders a <Feature /> component and calls fetchMessage', () => {
    const props = {
      fetchMessage: sinon.spy()
    };

    const wrapper = mount(
      <Provider store={store}>
        <connectedFeature {...props} />
      </Provider>
    );

    expect(wrapper.find('Feature').length).toEqual(1);
    expect(props.fetchMessage.calledOnce).toEqual(true);
  });
});

Answer 2

您可以使用shallow()代替mount()来测试您的组件。 shallow()方法调用componentWillMount()生命周期方法，因此没有理由使用mount()。（免责声明：我在[{1}}尚未表现出色。）

对于连接的组件，您可以传递这样的商店对象：

mount()

您应该两次调用<connectedFeature {...props} store={store} />方法，使其适用于连接的组件：

shallow()

测试连接的Redux组件时的提示

2 个答案: