jeudi 14 juin 2018

How should I test the composition of React components using HOCs (or should I even test them at all)?

Testing components with HOCs generally seems to be a major problem (enzyme#539, enzyme#1002, recompose#407, ...). Most discussions include the opinion "test only the HOC as a function and later not the use", whereby for unit tests the actual component is exported as named export and tested in isolation. Then some workarounds are suggested (like dive until the component is reached and the like).

The technical implementation is accordingly also (relatively) clear to me, but it is now difficult for me how and whether the composition should be tested with the HOCs in the end.

example:

import withState from 'recompose/withState';

export const InnerMyComponent = /* ... */;

const enhance = withState('prop', 'setProp', null);

export const MyComponent = enhance(InnerMyComponent);

It seems very important for the app that withState is called correctly and given prop and setProp to the inner component. Should I always test accordingly that the two props are passed on correctly like

expect(shallow(<MyComponent />).dive().prop('setProp')).toBeDefined()

So, should I write tests like that or what would be a better way to test the composition of an app?

Aucun commentaire:

Enregistrer un commentaire