React TestUtils vs. enzyme

[nelsonic]

https://medium.com/airbnb-engineering/enzyme-javascript-testing-utilities-for-react-a417e5e5090f
cc: @nikhilaravi @jrans @rjmk

[nikhilaravi]

@nelsonic I think it really depends on how detailed you want to make the tests and if you want to test .

Set up wise, there is some configuration needed for compatibility with different test runners and Enzyme still requires jsdom for full DOM rendering (the mount method).

Enzyme has lots of useful methods that makes some things easier like DOM traversal, and the tests are much more readable (scryRenderedComponentsWithType vs find). find can also be used for several different selection operations.

There are also methods for testing interaction with React component and its lifecycle methods for example if you want to test how component behaviour changes as props change you can use the setProps function which calls the componentWillReceiveProps lifecycle method.

Enzyme also allows selectors for some methods to be props (As well as components, display name, classes and tags which are already available in TestUtils) which is cool but not sure how many test cases it would be used for.

So in my opinion Enzyme looks cool (and I kind of want to use!) it but it might not be necessary for simple front end tests for which we could just use TestUtils and jsdom.

[des-des]

@nelsonic. I think testing react with only react-test-utils is v. painful / has not really worked for me. I think that jsx code for a react component is much more readable than the tests written for those components, which makes me sad. I would be super keen to give enzyme a go (but not sure if another component test refactor should really be squeezed in anytime soon for our proj).

[nikhilaravi]

@des-des @jrans @nelsonic what do you think of Teaspoon? https://github.com/jquense/teaspoon

[nelsonic]

@des-des makes sense that you don't want to refactor your client project. 😉
I guess the question should really have been:

For a new project where React is the chosen poison for view rendering, which toolset would you pick for testing?

@nikhilaravi has already given enzyme a go and teaspoon looks decent too.
I'm more of a fan of enzyme's dependency list/approach

• cheerio, lodash and independent react-test utils
  vs
• promises & hard-coded version of react-test utils

But always open to suggestions.

[timrichd]

I would just like to point out that while enzyme is highly recommended it seems to have a fatal flaw: No event propagation.

[nelsonic]

@timrichd thanks! can you point us to a link where this is documented? (please)

[Ore4444]

@nelsonic http://airbnb.io/enzyme/docs/future.html

Event simulation is limited for Shallow rendering. Event propagation is not supported, and one must supply their own event objects. We would like to provide tools to more fully simulate real interaction.