How to test the handlers in withHandlers, branch and withState of recompose with enzyme?

Question

I'm new to enzyme testing and I've made a component as :

import React from 'react';
import {
  compose,
  withState,
  withHandlers,
  branch,
  pure,
  renderComponent,
} from 'recompose';

import Fields from './components/Fields';
import Flow from './components/Flow';

export const MODE = {
  preview: 'preview',
  edit: 'edit',
};

const inEditMode = ({ mode }) => mode === MODE.edit;

const Component = branch(
  inEditMode,
  renderComponent(Fields),
  renderComponent(Flow),
)(Flow);

const Tab = pure(props => <Component {...props} />);

export default compose(
  withState('mode', 'changeMode', props => {
    const path = props.path;

    return props.path ? MODE.preview : MODE.edit;
  }),
  withHandlers({
    changeMode: ({ changeMode }) => () => changeMode(currentState => currentState === MODE.preview ? MODE.edit : MODE.preview),
    onApprovalChange: ({ onAction, entity }) => data => {
      onAction({ ...data, status: 'UPDATED' }, data.id);
    },
  }),
)(Tab);

In the above component, I want to test the following thing :

1. The rendering of the Component

2. inEditMode function of the component

3. Handlers present in withState and withHandlers

4. branch utility of recompose (I don't really think I need to check this because they might've already but suppose I want to test such function)

I could find some documentation on stackoverflow about testing but there was not one resource which could give overall idea.

Answer 1

When testing your component, you should test only your component, not the containers (the functions wrapping it) as they are higher order components.

If you want to test the functions from recompose look at their own tests: https://github.com/acdlite/recompose/blob/master/src/packages/recompose/tests/withState-test.js and just write your own based on that.

As for your component, make sure you export the individual parts and test them. In your scenario will be the functional component inEditMode:

export const inEditMode = ({ mode }) => mode === MODE.edit;

That's all you need to test on this component.