Skip to content

Commit a09dcb5

Browse files
eps1loneps1lon
committed
Switch from Enzyme to Testing Library
1 parent 5f79bbb commit a09dcb5

10 files changed

+359
-604
lines changed

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@
5353
"setupFiles": [
5454
"./test/setup.js"
5555
],
56+
"setupFilesAfterEnv": [
57+
"./test/setupAfterEnv.js"
58+
],
5659
"roots": [
5760
"<rootDir>/test"
5861
]
@@ -70,14 +73,14 @@
7073
"devDependencies": {
7174
"@babel/cli": "^7.8.4",
7275
"@babel/core": "^7.9.0",
73-
"@eps1lon/enzyme-adapter-react-17": "^0.1.0",
7476
"@restart/hooks": "^0.3.22",
7577
"@semantic-release/changelog": "^5.0.1",
7678
"@semantic-release/git": "^9.0.0",
7779
"@semantic-release/github": "^7.0.5",
7880
"@semantic-release/npm": "^7.0.5",
7981
"@storybook/addon-actions": "^6.3.4",
8082
"@storybook/react": "^6.3.4",
83+
"@testing-library/react": "^12.1.2",
8184
"@typescript-eslint/eslint-plugin": "^4.26.1",
8285
"astroturf": "^0.10.4",
8386
"babel-eslint": "^10.1.0",
@@ -86,8 +89,6 @@
8689
"babel-preset-jason": "^6.2.0",
8790
"cherry-pick": "^0.5.0",
8891
"cross-env": "^7.0.2",
89-
"enzyme": "^3.11.0",
90-
"enzyme-adapter-react-16": "^1.15.2",
9192
"eslint": "^7.28.0",
9293
"eslint-config-jason": "^8.1.1",
9394
"eslint-config-prettier": "^8.3.0",

‎test/CSSTransition-test.js

+28-38
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { render } from './utils';
33

44
import CSSTransition from '../src/CSSTransition';
55
import TransitionGroup from '../src/TransitionGroup';
66

77
describe('CSSTransition', () => {
88
it('should flush new props to the DOM before initiating a transition', (done) => {
99
const nodeRef = React.createRef();
10-
const wrapper = mount(
10+
const { setProps } = render(
1111
<CSSTransition
1212
in={false}
1313
nodeRef={nodeRef}
@@ -29,28 +29,23 @@ describe('CSSTransition', () => {
2929

3030
expect(nodeRef.current.classList.contains('test-class')).toEqual(false);
3131

32-
wrapper.setProps({
32+
setProps({
3333
in: true,
3434
className: 'test-class',
3535
});
3636
});
3737

3838
describe('entering', () => {
39-
let wrapper, nodeRef;
40-
41-
beforeEach(() => {
42-
nodeRef = React.createRef();
43-
wrapper = mount(
39+
it('should apply classes at each transition state', (done) => {
40+
let count = 0;
41+
const nodeRef = React.createRef();
42+
const { setProps } = render(
4443
<CSSTransition nodeRef={nodeRef} timeout={10} classNames="test">
4544
<div ref={nodeRef} />
4645
</CSSTransition>
4746
);
48-
});
49-
50-
it('should apply classes at each transition state', (done) => {
51-
let count = 0;
5247

53-
wrapper.setProps({
48+
setProps({
5449
in: true,
5550

5651
onEnter() {
@@ -76,7 +71,7 @@ describe('CSSTransition', () => {
7671
it('should apply custom classNames names', (done) => {
7772
let count = 0;
7873
const nodeRef = React.createRef();
79-
wrapper = mount(
74+
const { setProps } = render(
8075
<CSSTransition
8176
timeout={10}
8277
nodeRef={nodeRef}
@@ -90,7 +85,7 @@ describe('CSSTransition', () => {
9085
</CSSTransition>
9186
);
9287

93-
wrapper.setProps({
88+
setProps({
9489
in: true,
9590

9691
onEnter() {
@@ -118,7 +113,7 @@ describe('CSSTransition', () => {
118113
it('should apply appear classes at each transition state', (done) => {
119114
let count = 0;
120115
const nodeRef = React.createRef();
121-
mount(
116+
render(
122117
<CSSTransition
123118
timeout={10}
124119
nodeRef={nodeRef}
@@ -153,20 +148,20 @@ describe('CSSTransition', () => {
153148

154149
it('should lose the "*-appear-done" class after leaving and entering again', (done) => {
155150
const nodeRef = React.createRef();
156-
const wrapper = mount(
151+
const { setProps } = render(
157152
<CSSTransition
158153
timeout={10}
159154
nodeRef={nodeRef}
160155
classNames="appear-test"
161156
in={true}
162157
appear={true}
163158
onEntered={() => {
164-
wrapper.setProps({
159+
setProps({
165160
in: false,
166161
onEntered: () => {},
167162
onExited: () => {
168163
expect(nodeRef.current.className).toBe('appear-test-exit-done');
169-
wrapper.setProps({
164+
setProps({
170165
in: true,
171166
onEntered: () => {
172167
expect(nodeRef.current.className).toBe(
@@ -186,7 +181,7 @@ describe('CSSTransition', () => {
186181

187182
it('should not add undefined when appearDone is not defined', (done) => {
188183
const nodeRef = React.createRef();
189-
mount(
184+
render(
190185
<CSSTransition
191186
timeout={10}
192187
nodeRef={nodeRef}
@@ -211,7 +206,7 @@ describe('CSSTransition', () => {
211206
it('should not be appearing in normal enter mode', (done) => {
212207
let count = 0;
213208
const nodeRef = React.createRef();
214-
mount(
209+
render(
215210
<CSSTransition
216211
timeout={10}
217212
nodeRef={nodeRef}
@@ -250,7 +245,7 @@ describe('CSSTransition', () => {
250245

251246
it('should not enter the transition states when appear=false', () => {
252247
const nodeRef = React.createRef();
253-
mount(
248+
render(
254249
<CSSTransition
255250
timeout={10}
256251
nodeRef={nodeRef}
@@ -274,21 +269,16 @@ describe('CSSTransition', () => {
274269
});
275270

276271
describe('exiting', () => {
277-
let wrapper, nodeRef;
278-
279-
beforeEach(() => {
280-
nodeRef = React.createRef();
281-
wrapper = mount(
272+
it('should apply classes at each transition state', (done) => {
273+
let count = 0;
274+
const nodeRef = React.createRef();
275+
const { setProps } = render(
282276
<CSSTransition in nodeRef={nodeRef} timeout={10} classNames="test">
283277
<div ref={nodeRef} />
284278
</CSSTransition>
285279
);
286-
});
287-
288-
it('should apply classes at each transition state', (done) => {
289-
let count = 0;
290280

291-
wrapper.setProps({
281+
setProps({
292282
in: false,
293283

294284
onExit() {
@@ -314,7 +304,7 @@ describe('CSSTransition', () => {
314304
it('should apply custom classNames names', (done) => {
315305
let count = 0;
316306
const nodeRef = React.createRef();
317-
wrapper = mount(
307+
const { setProps } = render(
318308
<CSSTransition
319309
in
320310
nodeRef={nodeRef}
@@ -329,7 +319,7 @@ describe('CSSTransition', () => {
329319
</CSSTransition>
330320
);
331321

332-
wrapper.setProps({
322+
setProps({
333323
in: false,
334324

335325
onExit() {
@@ -356,13 +346,13 @@ describe('CSSTransition', () => {
356346
let count = 0;
357347

358348
const nodeRef = React.createRef();
359-
const wrapper = mount(
349+
const { setProps } = render(
360350
<CSSTransition in nodeRef={nodeRef} timeout={10}>
361351
<div ref={nodeRef} />
362352
</CSSTransition>
363353
);
364354

365-
wrapper.setProps({
355+
setProps({
366356
in: false,
367357

368358
onExit() {
@@ -418,13 +408,13 @@ describe('CSSTransition', () => {
418408
bar: React.createRef(),
419409
};
420410

421-
const wrapper = mount(
411+
const { setProps } = render(
422412
<Test direction="down" text="foo" nodeRef={nodeRef.foo} />
423413
);
424414

425415
const rerender = (getProps) =>
426416
new Promise((resolve) =>
427-
wrapper.setProps({
417+
setProps({
428418
onEnter: undefined,
429419
onEntering: undefined,
430420
onEntered: undefined,

‎test/CSSTransitionGroup-test.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import CSSTransition from '../src/CSSTransition';
44
let React;
55
let ReactDOM;
66
let TransitionGroup;
7+
let act;
8+
let render;
79

810
// Most of the real functionality is covered in other unit tests, this just
911
// makes sure we're wired up correctly.
1012
describe('CSSTransitionGroup', () => {
1113
let container;
1214
let consoleErrorSpy;
13-
let render;
1415

1516
function YoloTransition({ id, ...props }) {
1617
const nodeRef = React.useRef();
@@ -27,13 +28,12 @@ describe('CSSTransitionGroup', () => {
2728

2829
React = require('react');
2930
ReactDOM = require('react-dom');
31+
const testUtils = require('./utils');
32+
act = testUtils.act;
33+
const baseRender = testUtils.render;
3034

31-
render = (element, container, callback) =>
32-
ReactDOM.render(
33-
<React.StrictMode>{element}</React.StrictMode>,
34-
container,
35-
callback
36-
);
35+
render = (element, container) =>
36+
baseRender(<React.StrictMode>{element}</React.StrictMode>, { container });
3737

3838
TransitionGroup = require('../src/TransitionGroup');
3939

@@ -43,6 +43,7 @@ describe('CSSTransitionGroup', () => {
4343

4444
afterEach(() => {
4545
consoleErrorSpy.mockRestore();
46+
jest.useRealTimers();
4647
});
4748

4849
it('should clean-up silently after the timeout elapses', () => {
@@ -68,7 +69,9 @@ describe('CSSTransitionGroup', () => {
6869
expect(transitionGroupDiv.childNodes[0].id).toBe('two');
6970
expect(transitionGroupDiv.childNodes[1].id).toBe('one');
7071

71-
jest.runAllTimers();
72+
act(() => {
73+
jest.runAllTimers();
74+
});
7275

7376
// No warnings
7477
expect(consoleErrorSpy).not.toHaveBeenCalled();
@@ -121,7 +124,9 @@ describe('CSSTransitionGroup', () => {
121124
container
122125
);
123126

124-
jest.runAllTimers();
127+
act(() => {
128+
jest.runAllTimers();
129+
});
125130

126131
expect(transitionGroupDiv.childNodes.length).toBe(1);
127132

@@ -243,7 +248,9 @@ describe('CSSTransitionGroup', () => {
243248
render(<Component />, container);
244249

245250
// Testing that no exception is thrown here, as the timeout has been cleared.
246-
jest.runAllTimers();
251+
act(() => {
252+
jest.runAllTimers();
253+
});
247254
});
248255

249256
it('should work with custom component wrapper cloning children', () => {
@@ -283,6 +290,8 @@ describe('CSSTransitionGroup', () => {
283290
});
284291

285292
// Testing that no exception is thrown here, as the timeout has been cleared.
286-
jest.runAllTimers();
293+
act(() => {
294+
jest.runAllTimers();
295+
});
287296
});
288297
});

0 commit comments

Comments
 (0)