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