Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0cc928b

Browse files
committed
Migrated to React Testing Library 🐐
1 parent c2e8373 commit 0cc928b

File tree

2 files changed

+49
-34
lines changed

2 files changed

+49
-34
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
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

Lines changed: 48 additions & 34 deletions
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 TestUtilsfrom '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,aregex!/ })
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,aregex!/ },'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)

AltStyle によって変換されたページ (->オリジナル) /