React Testing Framework: Enzyme or react-test-renderer

[iisa]

Driving point:
One should always test the expected behaviour of components (i.e. the users' perspective). Avoid testing the internal implementation, even if testing libraries make it easy.

react-test-renderer

1. It is a library for rendering React components to pure JavaScript objects, and for asserting the behaviour of our components. Does not operate on DOM nodes unlike the below.
2. Shallow rendering has limitations (no ref support, no calling componentDidMount and componentDidUpdate) and react's own documentation recommends to use enzyme for the same purpose
3. Using instance() tests things users aren't even aware of, which goes the top stated philosophy

enzyme

1. Adds some great additional utility methods for rendering a component (or multiple components), finding elements, and interacting with elements.
2. Operates over DOM nodes instead of instances. Provides querying functions (similar to jQuery selectors) to interact with the DOM.
3. Shallow rendering makes it useful to isolate the component for pure unit testing. It protects against changes or bugs in a child component which may alter the behaviour or output of the component under test. Additionally makes tests run faster.
4. More readable code
5. No need to test as many implementation details

react-testing-library

1. It provides utility functions on top of react-dom. One's tests work on DOM nodes as opposed to React component instances.
2. Focuses on testing the surface of your component rather than the internals. Components can be changed as long as they render the data the same way or the React in the same way
3. More readable code
4. Provides various functions which make finding (using various attributes) easy like enzyme, but focuses to do so from a user's perspective. The utilities this library provides facilitate querying the DOM in the same way the user would. Eg. Finds form elements by their label text or links and buttons from their text (like a user would).
5. Doesn't allow shallow rendering. Believes that testing how all these components work together is arguably more important.
6. Pushes one to write more integration tests and fewer unit tests.

References
https://medium.com/codeclan/testing-react-with-jest-and-enzyme-20505fec4675 (jest and enzyme)
https://codeburst.io/testing-react-events-with-jest-and-enzyme-ii-46fbe4b8b589 (jest and enzyme)
https://codeburst.io/revisiting-react-testing-in-2019-ee72bb5346f4 (testing philosophy with react-test-renderer)
https://reactjs.org/docs/test-renderer.html (docs for test-renderer)
https://www.valentinog.com/blog/testing-react/ (react-test-renderer)
https://dev.to/softchris/use-react-testing-library-to-test-component-surface-2m9p (react-testing-library)
https://itnext.io/testing-components-with-jest-and-react-testing-library-d36f5262cde2 (react-testing-library)
https://kentcdodds.com/blog/introducing-the-react-testing-library (react-testing-library)
https://medium.com/flatiron-labs/refactoring-an-enzyme-component-test-to-use-react-testing-library-f5c36da6716f (react-testing-library)
unlock-protocol/unlock#467 (comment) (github comment on why to use react-testing-library vs enzyme)

[iisa]

Research is complete and has been documented above by @koderjoker. This issue is linked inside of our repo's wiki.