Tips when testing a connected Redux Component

Question

I've pasted my Component below which is very, very basic. When the Component is mounted, it will basically call the fetchMessage Action, which returns a message from an API. That message will in turn get set as state.feature.message in the mapStateToProps function.

I'm at a complete loss on where to begin testing this Component. I know that I want to test that:

1) The Feature Component is rendered

2) The fetchMessage function in props is called

3) It displays or has the correct message property when rendered using that

I've tried setting my test file up as you can see below, but I just end up with repeated error after error with everything that I try.

Could anyone point me in the right direction with what I'm doing wrong?

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

Test file:

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

Testing Connected React Components

Use separate exports for the connected and unconnected versions of the components.

Export the unconnected component as a named export and the connected as a default export.

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

Remember connected components must be wrapped in a Provider component as shown below.

Whereas unconnected components can be tested in isolation as they do not need to know about the Redux store.

Test file:

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

You can use shallow() instead of mount() to test your component. The shallow() method calls the componentWillMount() life-cycle method so there is no reason to use mount(). (Disclaimer: I am not quite well at mount() yet.)

For connected components, you can pass a store object like this:

<connectedFeature {...props} store={store} />

And you should call shallow() method twice to make it work for connected components:

const wrapper = shallow(<connectedFeature {...props} store={store} />).shallow()