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