The contracts between the components and the container are respected by the modules but not enforced by the specs

react_props_contract_respected_but_not_enforced.js

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