CODEWITHSUNDEEP
javascriptreactjsjestjsenzyme
ru3sch
ru3sch

Reputation: 796

Getting `render` call to return null when using Enzyme.mount

Question

Does anyone know of an acceptable way to get a mounted component to return null (or something similar) when using Enzyme.mount?

Use case

I have a component that is wrapped in n higher-order components. I would like to actually mount the component instead of shallow because I would like to test that componentDidMount called something as expected.

My mount function/test goes something like this:

const component = <ApplicationsShowRoute />;
const { store } = mountSetup(component);
expect(store.getActions()).toEqual([ { type: 'API_REQUEST' } ]);

When I mount this, I'd prefer not have to worry about what's being rendered (errors in child components, etc).

Code

export class ApplicationsShowRouteRaw extends Component {

  componentDidMount() {
    const { uuid } = this.props.match.params;

    this.props.fetchShowRoute(uuid);
  }

  props: Props

  render() {
    const { application, match } = this.props;

    return isEmpty(application) || application.Uuid !== match.params.uuid ? (
      <FullPageLoader />
    ) : (
      <ApplicationsShow
        application={application}
      />
    );
  }
}

export const mapStateToProps = (state: Object) => ({
  application: getShowRoute(state),
});

export const mapDispatchToProps = (dispatch: Function) => ({
  fetchShowRoute: (uuid: string) => dispatch(fetchShowRoute(uuid)),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ApplicationsShowRouteRaw);

Upvotes: 0

Views: 163

Answers (1)

mradziwon
mradziwon

Reputation: 1236

You can use shallow with lifecycleExperimental option set to true if you want shallow rendering with all lifecycle methods.

Upvotes: 1

Related Questions