7

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.

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Ajay Gaur
  • 5,140
  • 6
  • 38
  • 60
  • You can take a look into this comment for a workaround: https://github.com/acdlite/recompose/issues/407#issuecomment-309075313 – Gatsbimantico Nov 02 '18 at 17:43

1 Answers1

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.

Gatsbimantico
  • 1,822
  • 15
  • 32
  • Why not testing the containers? I think it is preferable to test the whole thing, that's the way it is going to be consumed anywhere else. The props passed by recompose are just implementation details. – Miguel Carvajal Nov 30 '18 at 22:34
  • @MiguelCarvajal The same way you'll not define a function every time you use it, you'll not test it when you use it. If I define a utils "parseAtoB" that is used in 10 components, doesn't make sense to check "if the input is A returns B" on every component. Of course I can protect my application by building a test for a third party library that I'm using, making sure the library keeps doing what I need it to do. But later I just need to test that I called the right function "component C calls parseAtoB" and expect the util to do what is meant to do. – Gatsbimantico Dec 02 '18 at 22:33