Skip to content

Commit c771f72

Browse files
timdeschryvertimdeschryver
authored
test: remove react from tab tests (testing-library#339)
1 parent 4356cc5 commit c771f72

File tree

1 file changed

+68
-62
lines changed

1 file changed

+68
-62
lines changed

‎src/__tests__/tab.js

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
import React from 'react'
2-
import {render, screen} from '@testing-library/react'
3-
import userEvent from '../../src'
1+
import userEvent from '..'
2+
import {setup} from './helpers/utils'
43

54
test('should cycle elements in document tab order', () => {
6-
render(
5+
setup(`
76
<div>
87
<input data-testid="element" type="checkbox" />
98
<input data-testid="element" type="radio" />
109
<input data-testid="element" type="number" />
11-
</div>,
12-
)
10+
</div>`)
1311

14-
const [checkbox, radio, number] = screen.getAllByTestId('element')
12+
const [checkbox, radio, number] = document.querySelectorAll(
13+
'[data-testid="element"]',
14+
)
1515

1616
expect(document.body).toHaveFocus()
1717

@@ -34,15 +34,16 @@ test('should cycle elements in document tab order', () => {
3434
})
3535

3636
test('should go backwards when shift = true', () => {
37-
render(
37+
setup(`
3838
<div>
3939
<input data-testid="element" type="checkbox" />
4040
<input data-testid="element" type="radio" />
4141
<input data-testid="element" type="number" />
42-
</div>,
43-
)
42+
</div>`)
4443

45-
const [checkbox, radio, number] = screen.getAllByTestId('element')
44+
const [checkbox, radio, number] = document.querySelectorAll(
45+
'[data-testid="element"]',
46+
)
4647

4748
radio.focus()
4849

@@ -56,15 +57,16 @@ test('should go backwards when shift = true', () => {
5657
})
5758

5859
test('should respect tabindex, regardless of dom position', () => {
59-
render(
60+
setup(`
6061
<div>
61-
<input data-testid="element" tabIndex={2} type="checkbox" />
62-
<input data-testid="element" tabIndex={1} type="radio" />
63-
<input data-testid="element" tabIndex={3} type="number" />
64-
</div>,
65-
)
62+
<input data-testid="element" tabIndex="2" type="checkbox" />
63+
<input data-testid="element" tabIndex="1" type="radio" />
64+
<input data-testid="element" tabIndex="3" type="number" />
65+
</div>`)
6666

67-
const [checkbox, radio, number] = screen.getAllByTestId('element')
67+
const [checkbox, radio, number] = document.querySelectorAll(
68+
'[data-testid="element"]',
69+
)
6870

6971
userEvent.tab()
7072

@@ -84,15 +86,16 @@ test('should respect tabindex, regardless of dom position', () => {
8486
})
8587

8688
test('should respect dom order when tabindex are all the same', () => {
87-
render(
89+
setup(`
8890
<div>
89-
<input data-testid="element" tabIndex={0} type="checkbox" />
90-
<input data-testid="element" tabIndex={1} type="radio" />
91-
<input data-testid="element" tabIndex={0} type="number" />
92-
</div>,
93-
)
91+
<input data-testid="element" tabIndex="0" type="checkbox" />
92+
<input data-testid="element" tabIndex="1" type="radio" />
93+
<input data-testid="element" tabIndex="0" type="number" />
94+
</div>`)
9495

95-
const [checkbox, radio, number] = screen.getAllByTestId('element')
96+
const [checkbox, radio, number] = document.querySelectorAll(
97+
'[data-testid="element"]',
98+
)
9699

97100
userEvent.tab()
98101

@@ -112,15 +115,16 @@ test('should respect dom order when tabindex are all the same', () => {
112115
})
113116

114117
test('should suport a mix of elements with/without tab index', () => {
115-
render(
118+
setup(`
116119
<div>
117-
<input data-testid="element" tabIndex={0} type="checkbox" />
118-
<input data-testid="element" tabIndex={1} type="radio" />
120+
<input data-testid="element" tabIndex="0" type="checkbox" />
121+
<input data-testid="element" tabIndex="1" type="radio" />
119122
<input data-testid="element" type="number" />
120-
</div>,
121-
)
123+
</div>`)
122124

123-
const [checkbox, radio, number] = screen.getAllByTestId('element')
125+
const [checkbox, radio, number] = document.querySelectorAll(
126+
'[data-testid="element"]',
127+
)
124128

125129
userEvent.tab()
126130

@@ -134,18 +138,17 @@ test('should suport a mix of elements with/without tab index', () => {
134138
})
135139

136140
test('should not tab to <a> with no href', () => {
137-
render(
141+
setup(`
138142
<div>
139-
<input data-testid="element" tabIndex={0} type="checkbox" />
143+
<input data-testid="element" tabIndex="0" type="checkbox" />
140144
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
141145
<a>ignore this</a>
142146
<a data-testid="element" href="http://www.testingjavascript.com">
143147
a link
144148
</a>
145-
</div>,
146-
)
149+
</div>`)
147150

148-
const [checkbox, link] = screen.getAllByTestId('element')
151+
const [checkbox, link] = document.querySelectorAll('[data-testid="element"]')
149152

150153
userEvent.tab()
151154

@@ -157,7 +160,7 @@ test('should not tab to <a> with no href', () => {
157160
})
158161

159162
test('should stay within a focus trap', () => {
160-
render(
163+
setup(`
161164
<>
162165
<div data-testid="div1">
163166
<input data-testid="element" type="checkbox" />
@@ -169,18 +172,20 @@ test('should stay within a focus trap', () => {
169172
<input data-testid="element" foo="bar" type="radio" />
170173
<input data-testid="element" foo="bar" type="number" />
171174
</div>
172-
</>,
173-
)
175+
</>`)
174176

175-
const [div1, div2] = [screen.getByTestId('div1'), screen.getByTestId('div2')]
177+
const [div1, div2] = [
178+
document.querySelector('[data-testid="div1"]'),
179+
document.querySelector('[data-testid="div2"]'),
180+
]
176181
const [
177182
checkbox1,
178183
radio1,
179184
number1,
180185
checkbox2,
181186
radio2,
182187
number2,
183-
] = screen.getAllByTestId('element')
188+
] = document.querySelectorAll('[data-testid="element"]')
184189

185190
expect(document.body).toHaveFocus()
186191

@@ -228,34 +233,37 @@ test('should stay within a focus trap', () => {
228233
test('should support unstable sorting environments like node 10', () => {
229234
const letters = 'abcdefghijklmnopqrstuvwxyz'
230235

231-
render(
236+
setup(`
232237
<div>
233-
{letters.split('').map(letter => (
234-
<input key={letter} type="text" data-testid={letter} />
235-
))}
236-
</div>,
237-
)
238+
${letters
239+
.split('')
240+
.map(
241+
letter => `<input key=${letter} type="text" data-testid=${letter} />`,
242+
)}
243+
</div>`)
238244

239245
expect.assertions(26)
240246

241247
letters.split('').forEach(letter => {
242248
userEvent.tab()
243-
expect(screen.getByTestId(letter)).toHaveFocus()
249+
expect(document.querySelector(`[data-testid="${letter}"]`)).toHaveFocus()
244250
})
245251
})
246252

247253
test('should not focus disabled elements', () => {
248-
render(
254+
setup(`
249255
<div>
250256
<input data-testid="one" />
251-
<input tabIndex={-1} />
257+
<input tabIndex="-1" />
252258
<button disabled>click</button>
253259
<input disabled />
254260
<input data-testid="five" />
255-
</div>,
256-
)
261+
</div>`)
257262

258-
const [one, five] = [screen.getByTestId('one'), screen.getByTestId('five')]
263+
const [one, five] = [
264+
document.querySelector('[data-testid="one"]'),
265+
document.querySelector('[data-testid="five"]'),
266+
]
259267

260268
userEvent.tab()
261269
expect(one).toHaveFocus()
@@ -265,8 +273,7 @@ test('should not focus disabled elements', () => {
265273
})
266274

267275
test('should keep focus on the document if there are no enabled, focusable elements', () => {
268-
render(<button disabled>no clicky</button>)
269-
276+
setup(`<button disabled>no clicky</button>`)
270277
userEvent.tab()
271278
expect(document.body).toHaveFocus()
272279

@@ -275,8 +282,8 @@ test('should keep focus on the document if there are no enabled, focusable eleme
275282
})
276283

277284
test('should respect radio groups', () => {
278-
render(
279-
<>
285+
setup(`
286+
<div>
280287
<input
281288
data-testid="element"
282289
type="radio"
@@ -300,13 +307,12 @@ test('should respect radio groups', () => {
300307
type="radio"
301308
name="second"
302309
value="second_right"
303-
defaultChecked
310+
checked
304311
/>
305-
</>,
306-
)
312+
</div>`)
307313

308-
const [firstLeft, firstRight, , secondRight] = screen.getAllByTestId(
309-
'element',
314+
const [firstLeft, firstRight, , secondRight] = document.querySelectorAll(
315+
'[data-testid="element"]',
310316
)
311317

312318
userEvent.tab()

0 commit comments

Comments
 (0)