Replace enzyme with React testing library (#2086)

* chore: Migrated enzyme tests to react-testing-render or @testing-library/react.

This is required for an upgrade to React 18, which enzyme does not support.

I've tried to keep the impact on the tests as small as possible.
Shallow snapshot tests use react-test-renderer/shallow.createRenderer
Deep snapshot tests use react-test-renderer.create
Interaction tests use @testing-library/react.render

In snapshots 'class' changed to 'className'.
The 'key' property is no longer emitted.
Injected HTML is formatted differently (quoted an no newlines).

Some tests navigated into the render output to pick out a smaller piece
to snapshot. That was too difficult to replicate.

There is a problem with the deabsdeep/serializer. It breaks
serialization of React Elements, because the map 'loses' the $$typeof
marker used by jest's native React serializer.
I've copied the serializer code into this project and fixed the problem.
In the future we could look at using this serializer selectively for
only tests that needs it.
deabsdeep library is still used in places, just not the serializer.

* chore: remove enzyme config from jest setup

* chore: remove enzyme dependencies

* chore: add temp istanbul / codecov ignore

related: 212cf66

* fix: fix some name conflict eslint warnings

Co-authored-by: Frits van Campen <[email protected]>
Co-authored-by: Thomas Roest <[email protected]>

Author: 3 people

docs/Development.md

@@ -101,7 +101,7 @@ Because of isolation and theming you need to explicitly declare `fontFamily`, `f
 
 ## Testing
 
-We’re using [Jest with Enzyme](http://blog.sapegin.me/all/react-jest) for testing. Put your component tests into `Component.spec.js` file in the same folder and all other tests into `__tests__/filename.spec.js`.
+We’re using [Jest with React Test Renderer](https://reactjs.org/docs/test-renderer.html) for testing. Put your component tests into `Component.spec.js` file in the same folder and all other tests into `__tests__/filename.spec.js`.
 
 To test particular class names use `classes` function (available in the global namespace in tests):
 
@@ -113,11 +113,12 @@ const props = {
 }
 
 it('should render active styles', () => {
-  const actual = shallow(
+  const renderer = createRenderer()
+  renderer.render(
     <TabButtonRenderer {...props} active>
       pizza
     </TabButtonRenderer>
   )
-  expect(actual).toMatchSnapshot()
+  expect(actual.toJson()).toMatchSnapshot()
 })
 ```