Skip to content

Commit 212cf66

Browse files
FritsvanCampenThomas Roest
authored andcommitted
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.
1 parent 5e6f5cf commit 212cf66

File tree

70 files changed

+1011
-730
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1011
-730
lines changed

docs/Development.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ Because of isolation and theming you need to explicitly declare `fontFamily`, `f
101101

102102
## Testing
103103

104-
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`.
104+
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`.
105105

106106
To test particular class names use `classes` function (available in the global namespace in tests):
107107

@@ -113,11 +113,12 @@ const props = {
113113
}
114114

115115
it('should render active styles', () => {
116-
const actual = shallow(
116+
const renderer = createRenderer()
117+
renderer.render(
117118
<TabButtonRenderer {...props} active>
118119
pizza
119120
</TabButtonRenderer>
120121
)
121-
expect(actual).toMatchSnapshot()
122+
expect(actual.toJson()).toMatchSnapshot()
122123
})
123124
```

0 commit comments

Comments
 (0)