Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
The contracts between the components and the container are respected by the modules but not enforced by the specs
// containers/form_container.js
import Form from '../components/form_component';
export const mapStateToProps = state => ({ username: state.username });
export default connect(mapStateToProps)(Form);
// components/form_component.js
import PropTypes from 'prop-types';
import React from 'react';
import FinalConfirmation from './final_confirmation_component';
const Form = class extends React.Component {
render() {
<FinalConfirmation {...this.props} />
};
};
Form.propTypes = {
username: PropTypes.string.isRequired,
};
export default Form;
// components/final_confirmation_component.js
import PropTypes from 'prop-types';
import React from 'react';
const FinalConfirmation = class extends React.Component {
render() {
<p id="username">
Username: {this.props.username}
</p>
};
};
FinalConfirmation.propTypes = {
username: PropTypes.string.isRequired,
};
export default FinalConfirmation;
// spec/containers/form_container_spec.js
import { mapStateToProps } from '../../containers/form_container';
describe('form container', () => {
it('should pass down the username', () => {
const state = { username: 'adamadeus' };
const props = mapStateToProps(state);
expect(props.username).to.equal('amadeus');
});
});
// spec/components/form_component_spec.js
import { shallow } from 'enzyme';
import Form from '../../components/form_component';
describe('Form component', => {
describe('final confirmation', () => {
it('should pass down the username', () => {
const props = { username: 'amadeus' };
const component = shallow(<Form {...props}/>);
expect(component.find('FinalConfirmation').props().username).to.equal('amadeus');
});
});
});
// spec/components/final_confirmation_component_spec.js
import { shallow } from 'enzyme';
import FinalConfirmation from 'final_confirmation_component';
describe('FinalConfirmation component', => {
it('should confirm the username', () => {
const props = { username: 'amadeus' };
const component = shallow(<FinalConfirmation {...props}/>);
expect(component.find('p#username').text()).to.equal('Username: amadeus');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.