Skip to content

Commit

Permalink
Replace enzyme with React testing library (#2086)
Browse files Browse the repository at this point in the history
* 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 <Frits.vanCampen@moxio.com>
Co-authored-by: Thomas Roest <thomas.roest@moxio.com>
  • Loading branch information
3 people committed Dec 13, 2022
1 parent 5e6f5cf commit 2ba612a
Show file tree
Hide file tree
Showing 71 changed files with 1,011 additions and 1,514 deletions.
7 changes: 4 additions & 3 deletions docs/Development.md
Expand Up @@ -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):

Expand All @@ -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()
})
```

0 comments on commit 2ba612a

Please sign in to comment.