samedi 8 avril 2017

Testing React Component with Mocha, Chai, and Enzyme

I'm new to testing in React, and I'm trying to test whether an action creator fires when a component first renders. The action creator I'm testing is activateUser. I'm using the the lifecycle method ComponentWillMount to fire the action creator. The test fails when I know that it succeeds in the browser. Here is the code for the component and the test.

confirmation.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { activateUser, resetAuthError } from '../../actions';
import { Link } from 'react-router';

class Confirmation extends Component {
  componentWillMount() {
    this.props.activateUser(this.props.params.token);
  }

  componentWillUnmount() {
    this.props.resetAuthError();
  }

  renderErrorView() {
    return (
      <div>
        <div className="alert alert-danger">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
        <Link className="btn btn-primary btn-lg" to="/confirmation">Resend 
   Confirmation Email</Link>
        <p>Already have a login and password? <Link to="/signin">Signin</Link>
    </p>
      </div>
    );
  }

  renderActivatedView() {
    return (
      <div>
        <div>Your account has been activated.</div>
        <Link className="btn btn-primary btn-lg" to="/feature">Go To Your 
Dashboard</Link>
      </div>
    );
  }

  render() {
        if (this.props.errorMessage) {
          return <div>{this.renderErrorView()}</div>;
        } else {
          return <div>{this.renderActivatedView()}</div>;
        }
  }
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error }
}

export default connect(mapStateToProps, { activateUser, resetAuthError })
(Confirmation);

confirmation_test.js

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

import Confirmation from '../../../src/components/auth/confirmation';

const mockStore = configureMockStore([thunk]);

describe('Confirmation', () => {
  let store;
   beforeEach(() => {
     store = mockStore({
       auth: {
         error: null
       }
     });
   });

  it('should call activateUser when mounted', (done) => {
    const props = {
      params: {
        token: '123456'
      },
    }

    const activateUser = sinon.spy();

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

     expect(activateUser.calledOnce).to.equal(true);

     done();
  });
});

The output tells me that the action creator isn't firing, but when I test it in the browser it does get called. Any help would be appreciated.

Aucun commentaire:

Enregistrer un commentaire