Suppress render React component conditionally

step.js

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';

export const Step = ({title, children, id, state}) => {
  if (state && !(state.present.ui.step === Number(id))) {
    console.log('step denied');
    return null;
  }

  return (
    <section>
      <h2>{title}</h2>
      <div className="step _grid-container__body">
        {children}
      </div>
    </section>);
};

Step.propTypes = {
  children: PropTypes.node,
  state: PropTypes.object,
  title: PropTypes.string,
  id: PropTypes.string,
};

const mapStateToProps = state => (
  {
    state: state
  }
);

export default connect(mapStateToProps)(Step);

step.test.js

/* eslint-env jest */

import React from 'react';
import {shallow} from 'enzyme';

import {Step} from './step';

const renderComponent = (props) => {
  const wrapper = shallow(
    <Step>
      <p/>
    </Step>
  );

  if (props && props.state) {
    props = Object.assign(props, {
      state: {
        present: {
          ui: props.state
        }
      }
    });
  }

  if (props) {
    wrapper.setProps(props);
    wrapper.update();
  }

  return wrapper;
};

describe('<Step />', () => {
  it('should render when step is active', () => {
    const renderedComponent = renderComponent({id: '1', state: {step: {number: 1}}});
    expect(renderedComponent.containsMatchingElement(<p />)).toBeTruthy();

  });

  it('should NOT render when step is inactive', () => {
    const renderedComponent = renderComponent({id: '1', state: {step: {number: 2}}});
    expect(renderedComponent.containsMatchingElement(<p/>)).toBeFalsy();
  });
});