Skip to content

Commit 2043126

Browse files
erikraserikras
authored
Merge pull request #25 from final-form/migrate-testing-lib
Migrated to React Testing Library 🐐
2 parents c2e8373 + 17593a1 commit 2043126

5 files changed

+56
-41
lines changed

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ es
1010
npm-debug.log
1111
.DS_Store
1212
.idea
13-
yarn.lock
13+
yarn.lock
14+
package-lock.json

‎.travis.yml

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
sudo: false
22
language: node_js
33
before_install:
4-
- npm install -g npm@6.4.0
4+
- npm install -g npm@latest
55
cache:
66
directories:
77
- node_modules
88
notifications:
99
email: false
1010
node_js:
11-
- '8'
12-
- '9'
1311
- '10'
14-
- 'stable'
12+
- '12'
13+
- '14'
1514
script:
1615
- npm start validate
1716
after_success:
1817
- npx codecov
1918
branches:
2019
only:
21-
- master
20+
- master

‎package-scripts.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ module.exports = {
7575
validate: {
7676
description:
7777
'This runs several scripts to make sure things look good before committing or on clean install',
78-
default: concurrent.nps('lint', 'flow', 'build.andTest', 'test')
78+
default: concurrent.nps('lint', 'build.andTest', 'test')
7979
}
8080
},
8181
options: {

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"@babel/preset-env": "^7.10.0",
4242
"@babel/preset-flow": "^7.9.0",
4343
"@babel/preset-react": "^7.10.0",
44+
"@testing-library/react": "^10.2.1",
4445
"babel-core": "^7.0.0-bridge.0",
4546
"babel-eslint": "^10.1.0",
4647
"babel-jest": "^26.0.1",

‎src/Html5ValidationField.test.js

+48-34
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom'
3-
import TestUtils from 'react-dom/test-utils'
3+
import { render, cleanup } from '@testing-library/react'
44
import { Form } from 'react-final-form'
55
import Html5ValidationField from './Html5ValidationField'
66

77
const onSubmitMock = () => {}
88

9-
const getAttributes = el => {
9+
const getAttributes = (el) => {
1010
for (const key in el) {
1111
if (key.startsWith(`__reactEventHandlers$`)) {
1212
return el[key]
@@ -16,22 +16,31 @@ const getAttributes = el => {
1616
}
1717

1818
describe('Html5ValidationField', () => {
19+
afterEach(cleanup)
20+
1921
describe('Html5ValidationField.rules', () => {
20-
const testPassThrough = rule => {
22+
const testPassThrough = (rule, testId = 'input') => {
2123
const consoleSpy = jest
2224
.spyOn(global.console, 'error')
2325
.mockImplementation(() => {})
24-
const dom = TestUtils.renderIntoDocument(
26+
const { getByTestId } = render(
2527
<Form onSubmit={onSubmitMock} subscription={{}}>
2628
{() => (
27-
<Html5ValidationField name="foo" component="input" {...rule} />
29+
<Html5ValidationField
30+
name="foo"
31+
component="input"
32+
{...rule}
33+
data-testid={testId}
34+
/>
2835
)}
2936
</Form>
3037
)
31-
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
38+
const input = getByTestId(testId)
3239
expect(input).toBeDefined()
3340
const attributes = getAttributes(input)
34-
Object.keys(rule).forEach(key => expect(attributes[key]).toBe(rule[key]))
41+
Object.keys(rule).forEach((key) =>
42+
expect(attributes[key]).toBe(rule[key])
43+
)
3544
consoleSpy.mockRestore()
3645
}
3746

@@ -40,13 +49,13 @@ describe('Html5ValidationField', () => {
4049
})
4150

4251
it('should pass "pattern" through to input', () => {
43-
testPassThrough({ pattern: 'text' })
44-
testPassThrough({ pattern: 'search' })
45-
testPassThrough({ pattern: 'url' })
46-
testPassThrough({ pattern: 'tel' })
47-
testPassThrough({ pattern: 'email' })
48-
testPassThrough({ pattern: 'password' })
49-
testPassThrough({ pattern: /look, ma, a regex!/ })
52+
testPassThrough({ pattern: 'text' }, 'text')
53+
testPassThrough({ pattern: 'search' }, 'search')
54+
testPassThrough({ pattern: 'url' }, 'url')
55+
testPassThrough({ pattern: 'tel' }, 'tel')
56+
testPassThrough({ pattern: 'email' }, 'email')
57+
testPassThrough({ pattern: 'password' }, 'password')
58+
testPassThrough({ pattern: /look, ma, a regex!/ }, 'regex')
5059
})
5160

5261
it('should pass "min" through to input', () => {
@@ -72,7 +81,7 @@ describe('Html5ValidationField', () => {
7281

7382
it('should pass ref through to the input', () => {
7483
const ref = React.createRef()
75-
TestUtils.renderIntoDocument(
84+
render(
7685
<Form onSubmit={onSubmitMock} subscription={{ values: true }}>
7786
{() => (
7887
<form>
@@ -87,21 +96,26 @@ describe('Html5ValidationField', () => {
8796
})
8897

8998
describe('Html5ValidationField.messages', () => {
90-
const testNotPassThrough = message => {
99+
const testNotPassThrough = (message) => {
91100
const consoleSpy = jest
92101
.spyOn(global.console, 'error')
93102
.mockImplementation(() => {})
94-
const dom = TestUtils.renderIntoDocument(
103+
const { getByTestId } = render(
95104
<Form onSubmit={onSubmitMock} subscription={{}}>
96105
{() => (
97-
<Html5ValidationField name="foo" component="input" {...message} />
106+
<Html5ValidationField
107+
name="foo"
108+
component="input"
109+
{...message}
110+
data-testid="input"
111+
/>
98112
)}
99113
</Form>
100114
)
101-
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
115+
const input = getByTestId('input')
102116
expect(input).toBeDefined()
103117
const attributes = getAttributes(input)
104-
Object.keys(message).forEach(key =>
118+
Object.keys(message).forEach((key) =>
105119
expect(attributes[key]).toBeUndefined()
106120
)
107121
consoleSpy.mockRestore()
@@ -116,7 +130,7 @@ describe('Html5ValidationField', () => {
116130
'tooShort',
117131
'typeMismatch',
118132
'valueMissing'
119-
].forEach(key => {
133+
].forEach((key) => {
120134
it(`should not pass "${key}" through to input`, () => {
121135
testNotPassThrough({ [key]: 'All your base are belong to us' })
122136
})
@@ -148,7 +162,7 @@ describe('Html5ValidationField', () => {
148162
},
149163
() => {
150164
const spy = jest.fn(({ input }) => <input {...input} />)
151-
TestUtils.renderIntoDocument(
165+
render(
152166
<Form onSubmit={onSubmitMock} subscription={{}}>
153167
{() => <Html5ValidationField name="foo" render={spy} />}
154168
</Form>
@@ -178,7 +192,7 @@ describe('Html5ValidationField', () => {
178192
},
179193
() => {
180194
const spy = jest.fn(({ input }) => <input {...input} />)
181-
TestUtils.renderIntoDocument(
195+
render(
182196
<Form onSubmit={onSubmitMock} subscription={{}}>
183197
{() => <Html5ValidationField name="foo.bar" render={spy} />}
184198
</Form>
@@ -198,7 +212,7 @@ describe('Html5ValidationField', () => {
198212
.mockImplementation(() => {})
199213
mockFindNode(undefined, () => {
200214
const spy = jest.fn(({ input }) => <input {...input} />)
201-
TestUtils.renderIntoDocument(
215+
render(
202216
<Form onSubmit={onSubmitMock} subscription={{}}>
203217
{() => <Html5ValidationField name="foo" render={spy} />}
204218
</Form>
@@ -218,7 +232,7 @@ describe('Html5ValidationField', () => {
218232
},
219233
() => {
220234
const spy = jest.fn(({ input }) => <input {...input} />)
221-
TestUtils.renderIntoDocument(
235+
render(
222236
<Form onSubmit={onSubmitMock} subscription={{}}>
223237
{() => <Html5ValidationField name="foo" render={spy} />}
224238
</Form>
@@ -245,7 +259,7 @@ describe('Html5ValidationField', () => {
245259
},
246260
() => {
247261
const spy = jest.fn(({ input }) => <input {...input} />)
248-
TestUtils.renderIntoDocument(
262+
render(
249263
<Form onSubmit={onSubmitMock} subscription={{}}>
250264
{() => <Html5ValidationField name="foo" render={spy} />}
251265
</Form>
@@ -278,7 +292,7 @@ describe('Html5ValidationField', () => {
278292
},
279293
() => {
280294
const spy = jest.fn(({ input }) => <input {...input} />)
281-
TestUtils.renderIntoDocument(
295+
render(
282296
<Form onSubmit={onSubmitMock} subscription={{}}>
283297
{() => <Html5ValidationField name="foo" render={spy} />}
284298
</Form>
@@ -309,7 +323,7 @@ describe('Html5ValidationField', () => {
309323
() => {
310324
const spy = jest.fn(({ input }) => <input {...input} />)
311325
const validate = jest.fn(() => 'Special error')
312-
TestUtils.renderIntoDocument(
326+
render(
313327
<Form
314328
onSubmit={onSubmitMock}
315329
initialValues={{ foo: 'bar' }}
@@ -351,7 +365,7 @@ describe('Html5ValidationField', () => {
351365
() => {
352366
const spy = jest.fn(({ input }) => <input {...input} />)
353367
const validate = jest.fn(() => 'Special error')
354-
TestUtils.renderIntoDocument(
368+
render(
355369
<Form
356370
onSubmit={onSubmitMock}
357371
initialValues={{ foo: 'bar' }}
@@ -401,7 +415,7 @@ describe('Html5ValidationField', () => {
401415
() => {
402416
const spy = jest.fn(({ input }) => <input {...input} />)
403417
const validate = jest.fn(() => ({ deep: 'Special error' }))
404-
TestUtils.renderIntoDocument(
418+
render(
405419
<Form
406420
onSubmit={onSubmitMock}
407421
initialValues={{ foo: 'bar' }}
@@ -447,7 +461,7 @@ describe('Html5ValidationField', () => {
447461
() => {
448462
const spy = jest.fn(({ input }) => <input {...input} />)
449463
const validate = jest.fn(() => {})
450-
TestUtils.renderIntoDocument(
464+
render(
451465
<Form
452466
onSubmit={onSubmitMock}
453467
initialValues={{ foo: 'bar' }}
@@ -494,7 +508,7 @@ describe('Html5ValidationField', () => {
494508
},
495509
() => {
496510
const spy = jest.fn(({ input }) => <input {...input} />)
497-
TestUtils.renderIntoDocument(
511+
render(
498512
<Form
499513
onSubmit={onSubmitMock}
500514
initialValues={{ foo: 'bar' }}
@@ -530,7 +544,7 @@ describe('Html5ValidationField', () => {
530544
},
531545
() => {
532546
const spy = jest.fn(({ input }) => <input {...input} />)
533-
TestUtils.renderIntoDocument(
547+
render(
534548
<Form
535549
onSubmit={onSubmitMock}
536550
initialValues={{ foo: 'bar' }}
@@ -565,7 +579,7 @@ describe('Html5ValidationField', () => {
565579
},
566580
() => {
567581
const spy = jest.fn(({ input }) => <input {...input} />)
568-
TestUtils.renderIntoDocument(
582+
render(
569583
<Form
570584
initialValues={{ foo: 'bar' }}
571585
onSubmit={onSubmitMock}

0 commit comments

Comments
 (0)