mardi 3 janvier 2017

Tips when testing a connected Redux Component

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

Aucun commentaire:

Enregistrer un commentaire