The contracts between the components and the container are enforced by the specs

react_props_contract_respected_and_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';
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 PropTypes from 'prop-types';

import { mapStateToProps } from '../../containers/form_container';
import Form from '../../components/form_component';

let error;
let props;

describe('form container', () => {
  beforeAll(done => {
    const state = { username: 'adamadeus' };
    props = mapStateToProps(state);
  });

  it('should pass through the username', () =>
    expect(props.username).to.equal('amadeus'));

  it('should pass down valid props', () =>
    expect(() => PropTypes.checkPropTypes(Form.propTypes, props)).not.to.throw());
  });
});

// spec/components/form_component_spec.js
import { shallow } from 'enzyme';
import PropTypes from 'prop-types';

import Form from '../../components/form_component';
import FinalConfirmation from '../../components/final_confirmation';

let childProps;
let component;
let error;

describe('Form component', () => {
  describe('final confirmation', () => {
    beforeAll(done => {
      const props = { username: 'amadeus' };
      component = shallow(<Form {...props}/>);
      childProps = component.find(FinalConfirmation).props();
    });

    it('should pass down the username', () =>
      expect(childProps.username).to.equal('amadeus'));

    it('should pass down valid props', () =>
      expect(() => PropTypes.checkPropTypes(FinalConfirmation.propTypes, childProps)).not.to.throw());
  });
});

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

import FinalConfirmation from '../../components/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');
  });
});