LearnersGuild / idm

identity management service
MIT License
2 stars 24 forks source link

Use Enzyme for react component tests #96

Closed heyheyjp closed 8 years ago

heyheyjp commented 8 years ago

Fixes https://github.com/LearnersGuild/idm/issues/97.

Enzyme is a new-ish React testing util library from Airbnb. It's got a lot of of nice syntactic sugar in the API that allows test code to be less verbose (on the whole) than code written using lower-level React test utils directly. Perhaps most importantly, it offers a shallow rendering feature that allows for test execution to be considerably more performant than tests that involve full DOM rendering. Shallow rendering also encourages us to write tests such that they're focused on validating behavior of individual components as (as opposed to testing behavior of nested components).

We already have tests for some components that attempt to check the state of other, deeply nested components. It was at times difficult to make these same assertions using enzyme's shallow rendering (as should be expected), and it was unfortunately problematic to use the full mount() option (which might be as much due to a problem with enzyme's current implementation and/or the fact that we're still using React 14 as anything else). With a few small changes, though, the tests make the same assertions as they did before. The one previously unimplemented test has been implemented. Warnings that were being raised have been addressed. Performance might be marginally improved. Code is slightly less verbose.

The main objective here is simply to introduce enzyme as a tool worth considering when writing tests for React components.

http://airbnb.io/enzyme/

jeffreywescott commented 8 years ago

I like this. It looks much better than the old way.

My comments were mostly:

I'd like to at least fix the naming stuff. WDYT?

heyheyjp commented 8 years ago

Cool. All fixed up. Anything else @jeffreywescott?

jeffreywescott commented 8 years ago

Looks solid. Merging.