The contracts between the components and the container are violated by the modules, but this is not detected by the specs

react_props_contract_violated_with_proptype_inconsistency.js

// containers/form_container.js
import Form from '../components/form_component';

// The container passes a 'username' prop (type: string) to Form
export const mapStateToProps = state => ({ username: state.username });
export 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() {
    // Form passes whatever props it receives to FinalConfirmation
    <FinalConfirmation {...this.props} />
  };
};

// Form expects to receive an 'email' prop (type: string) from the container
Form.propTypes = {
  email: 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.user.name}
    </p>
  };
};

// FinalConfirmation expects to receive a 'username' prop (type: object) from Form
FinalConfirmation.propTypes = {
  username: PropTypes.shape({
    name: PropTypes.string.isRequired,
  });
};

export default FinalConfirmation;

// spec/containers/form_container_spec.js
import { mapStateToProps } from '../../containers/form_container';

// The test will pass despite sending unexpected props to Form
describe('form container', () => {
  it('should pass down the email', () => {
    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';

// The test will pass despite sending unexpected props to FinalConfirmation
describe('Form component', => {
  describe('final confirmation', () => {
    it('should pass down the username', () => {
      const props = { email: '[email protected]' };
      const component = shallow(<Form {...props}/>);
      expect(component.find('FinalConfirmation').props().email).to.equal('[email protected]');
    });
  });
});

// spec/components/final_confirmation_spec.js
import { shallow } from 'enzyme';

import FinalConfirmation from '../../components/final_confirmation_component';

// The test will pass because the test, unlike Form, sends the expected props to FinalComponent
describe('FinalConfirmation component', => {
  it('should confirm the username', () => {
    const props = { user: { name: 'amadeus' } };
    const component = shallow(<FinalConfirmation {...props}/>);
    expect(component.find('p#username').text()).to.equal('Username: amadeus');
  });
});