search

dwyl / learn-react

"The possibilities are numerous once we decide to act and not react." ~ George Bernard Shaw
108 stars 22 forks source link

React TestUtils vs. enzyme #19

Open nelsonic opened 8 years ago

nelsonic commented 8 years ago

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

nikhilaravi commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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

nelsonic commented 8 years ago

@des-des makes sense that you don't want to refactor your client project. :wink: 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

But always open to suggestions.

timrichd commented 8 years ago

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

nelsonic commented 8 years ago

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

Ore4444 commented 8 years ago

@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.