@khanacademy/wonder-blocks-button 2.11.7 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/es/index.js +12 -9
  3. package/dist/index.js +25 -20
  4. package/package.json +1 -1
  5. package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +4646 -780
  6. package/src/__tests__/custom-snapshot.test.js +1 -1
  7. package/src/components/__docs__/accessibility.stories.mdx +1 -1
  8. package/src/components/__docs__/best-practices.stories.mdx +1 -1
  9. package/src/components/__docs__/button.argtypes.js +3 -3
  10. package/src/components/{button.stories.js → __docs__/button.stories.js} +195 -275
  11. package/src/components/__docs__/navigation-callbacks.stories.mdx +121 -2
  12. package/src/components/__tests__/button.test.js +138 -191
  13. package/src/components/button-core.js +14 -8
  14. package/src/components/button.js +2 -2
  15. package/src/components/button.md +4 -920
  16. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -5009
  17. package/src/__tests__/generated-snapshot.test.js +0 -789
package/src/components/__tests__/button.test.js CHANGED
@@ -1,24 +1,11 @@
1
1
  // @flow
2
2
  import * as React from "react";
3
3
  import {MemoryRouter, Route, Switch} from "react-router-dom";
4
- import {render, screen} from "@testing-library/react";
5
- import {mount} from "enzyme";
6
- import "jest-enzyme";
4
+ import {render, screen, waitFor} from "@testing-library/react";
5
+ import userEvent from "@testing-library/user-event";
7
6
 
8
7
  import Button from "../button.js";
9
8
 
10
- const wait = (delay: number = 0) =>
11
- new Promise((resolve, reject) => {
12
- // eslint-disable-next-line no-restricted-syntax
13
- return setTimeout(resolve, delay);
14
- });
15
-
16
- const keyCodes = {
17
- tab: 9,
18
- enter: 13,
19
- space: 32,
20
- };
21
-
22
9
  describe("Button", () => {
23
10
  const {location} = window;
24
11
 
@@ -33,7 +20,7 @@ describe("Button", () => {
33
20
 
34
21
  test("client-side navigation", () => {
35
22
  // Arrange
36
- const wrapper = mount(
23
+ render(
37
24
  <MemoryRouter>
38
25
  <div>
39
26
  <Button href="/foo">Click me!</Button>
@@ -47,16 +34,16 @@ describe("Button", () => {
47
34
  );
48
35
 
49
36
  // Act
50
- const buttonWrapper = wrapper.find("Button");
51
- buttonWrapper.simulate("click", {button: 0});
37
+ const button = screen.getByRole("button");
38
+ userEvent.click(button);
52
39
 
53
40
  // Assert
54
- expect(wrapper.find("#foo")).toExist();
41
+ expect(screen.getByText("Hello, world!")).toBeInTheDocument();
55
42
  });
56
43
 
57
- test("beforeNav rejection blocks client-side navigation", async () => {
44
+ test("beforeNav rejection blocks client-side navigation", () => {
58
45
  // Arrange
59
- const wrapper = mount(
46
+ render(
60
47
  <MemoryRouter>
61
48
  <div>
62
49
  <Button href="/foo" beforeNav={(e) => Promise.reject()}>
@@ -72,19 +59,17 @@ describe("Button", () => {
72
59
  );
73
60
 
74
61
  // Act
75
- const buttonWrapper = wrapper.find("Button");
76
- buttonWrapper.simulate("click", {button: 0});
77
- await wait(0);
78
- buttonWrapper.update();
62
+ const button = screen.getByRole("button");
63
+ userEvent.click(button);
79
64
 
80
65
  // Assert
81
- expect(wrapper.find("#foo")).not.toExist();
66
+ expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
82
67
  });
83
68
 
84
- test("beforeNav rejection blocks calling safeWithNav", async () => {
69
+ test("beforeNav rejection blocks calling safeWithNav", () => {
85
70
  // Arrange
86
71
  const safeWithNavMock = jest.fn();
87
- const wrapper = mount(
72
+ render(
88
73
  <MemoryRouter>
89
74
  <div>
90
75
  <Button
@@ -104,10 +89,8 @@ describe("Button", () => {
104
89
  );
105
90
 
106
91
  // Act
107
- const buttonWrapper = wrapper.find("Button");
108
- buttonWrapper.simulate("click", {button: 0});
109
- await wait(0);
110
- buttonWrapper.update();
92
+ const button = screen.getByRole("button");
93
+ userEvent.click(button);
111
94
 
112
95
  // Assert
113
96
  expect(safeWithNavMock).not.toHaveBeenCalled();
@@ -115,7 +98,7 @@ describe("Button", () => {
115
98
 
116
99
  test("beforeNav resolution results in client-side navigation", async () => {
117
100
  // Arrange
118
- const wrapper = mount(
101
+ render(
119
102
  <MemoryRouter>
120
103
  <div>
121
104
  <Button href="/foo" beforeNav={(e) => Promise.resolve()}>
@@ -131,19 +114,19 @@ describe("Button", () => {
131
114
  );
132
115
 
133
116
  // Act
134
- const buttonWrapper = wrapper.find("Button");
135
- buttonWrapper.simulate("click", {button: 0});
136
- await wait(0);
137
- buttonWrapper.update();
117
+ const button = screen.getByRole("button");
118
+ userEvent.click(button);
138
119
 
139
120
  // Assert
140
- expect(wrapper.find("#foo")).toExist();
121
+ waitFor(() => {
122
+ expect(screen.getByText("Hello, world!")).toBeInTheDocument();
123
+ });
141
124
  });
142
125
 
143
126
  test("beforeNav resolution results in safeWithNav being called", async () => {
144
127
  // Arrange
145
128
  const safeWithNavMock = jest.fn();
146
- const wrapper = mount(
129
+ render(
147
130
  <MemoryRouter>
148
131
  <div>
149
132
  <Button
@@ -163,18 +146,18 @@ describe("Button", () => {
163
146
  );
164
147
 
165
148
  // Act
166
- const buttonWrapper = wrapper.find("Button");
167
- buttonWrapper.simulate("click", {button: 0});
168
- await wait(0);
169
- buttonWrapper.update();
149
+ const button = screen.getByRole("button");
150
+ userEvent.click(button);
170
151
 
171
152
  // Assert
172
- expect(safeWithNavMock).toHaveBeenCalled();
153
+ waitFor(() => {
154
+ expect(safeWithNavMock).toHaveBeenCalled();
155
+ });
173
156
  });
174
157
 
175
- test("show circular spinner before beforeNav resolves", async () => {
158
+ test("show circular spinner before beforeNav resolves", () => {
176
159
  // Arrange
177
- const wrapper = mount(
160
+ render(
178
161
  <MemoryRouter>
179
162
  <div>
180
163
  <Button href="/foo" beforeNav={(e) => Promise.resolve()}>
@@ -190,20 +173,18 @@ describe("Button", () => {
190
173
  );
191
174
 
192
175
  // Act
193
- const buttonWrapper = wrapper.find("Button");
194
- buttonWrapper.simulate("click", {button: 0});
176
+ const button = screen.getByRole("button");
177
+ userEvent.click(button);
195
178
 
196
179
  // Assert
197
- // We want the button to look exactly the same as if someone had passed
198
- // `spinner={true}` as a prop.
199
- expect(wrapper.find("ButtonCore")).toHaveProp({spinner: true});
200
- expect(wrapper.find("CircularSpinner")).toExist();
180
+ // TODO(juan): Find a way to use a more accessible query.
181
+ expect(screen.getByTestId("button-spinner")).toBeInTheDocument();
201
182
  });
202
183
 
203
184
  test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
204
185
  // Arrange
205
186
  jest.spyOn(window.location, "assign");
206
- const wrapper = mount(
187
+ render(
207
188
  <MemoryRouter>
208
189
  <div>
209
190
  <Button
@@ -223,19 +204,19 @@ describe("Button", () => {
223
204
  );
224
205
 
225
206
  // Act
226
- const buttonWrapper = wrapper.find("Button");
227
- buttonWrapper.simulate("click", {button: 0});
228
- await wait(0);
229
- buttonWrapper.update();
207
+ const button = screen.getByRole("button");
208
+ userEvent.click(button);
230
209
 
231
210
  // Assert
232
- expect(window.location.assign).toHaveBeenCalledWith("/foo");
211
+ waitFor(() => {
212
+ expect(window.location.assign).toHaveBeenCalledWith("/foo");
213
+ });
233
214
  });
234
215
 
235
216
  test("safeWithNav with skipClientNav=true shows spinner", async () => {
236
217
  // Arrange
237
218
  jest.spyOn(window.location, "assign");
238
- const wrapper = mount(
219
+ render(
239
220
  <MemoryRouter>
240
221
  <div>
241
222
  <Button
@@ -255,17 +236,17 @@ describe("Button", () => {
255
236
  );
256
237
 
257
238
  // Act
258
- const buttonWrapper = wrapper.find("Button");
259
- buttonWrapper.simulate("click", {button: 0});
239
+ const button = screen.getByRole("button");
240
+ userEvent.click(button);
260
241
 
261
242
  // Assert
262
- expect(wrapper.find("CircularSpinner")).toExist();
243
+ expect(screen.getByTestId("button-spinner")).toBeInTheDocument();
263
244
  });
264
245
 
265
246
  test("beforeNav resolution and safeWithNav with skipClientNav=true waits for promise resolution", async () => {
266
247
  // Arrange
267
248
  jest.spyOn(window.location, "assign");
268
- const wrapper = mount(
249
+ render(
269
250
  <MemoryRouter>
270
251
  <div>
271
252
  <Button
@@ -286,21 +267,19 @@ describe("Button", () => {
286
267
  );
287
268
 
288
269
  // Act
289
- const buttonWrapper = wrapper.find("Button");
290
- buttonWrapper.simulate("click", {button: 0});
291
- await wait(0);
292
- buttonWrapper.update();
293
- await wait(0);
294
- buttonWrapper.update();
270
+ const button = screen.getByRole("button");
271
+ userEvent.click(button);
295
272
 
296
273
  // Assert
297
- expect(window.location.assign).toHaveBeenCalledWith("/foo");
274
+ waitFor(() => {
275
+ expect(window.location.assign).toHaveBeenCalledWith("/foo");
276
+ });
298
277
  });
299
278
 
300
279
  test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
301
280
  // Arrange
302
281
  jest.spyOn(window.location, "assign");
303
- const wrapper = mount(
282
+ render(
304
283
  <MemoryRouter>
305
284
  <div>
306
285
  <Button
@@ -320,10 +299,8 @@ describe("Button", () => {
320
299
  );
321
300
 
322
301
  // Act
323
- const buttonWrapper = wrapper.find("Button");
324
- buttonWrapper.simulate("click", {button: 0});
325
- await wait(0);
326
- buttonWrapper.update();
302
+ const button = screen.getByRole("button");
303
+ userEvent.click(button);
327
304
 
328
305
  // Assert
329
306
  expect(window.location.assign).toHaveBeenCalledWith("/foo");
@@ -333,7 +310,7 @@ describe("Button", () => {
333
310
  // Arrange
334
311
  jest.spyOn(window.location, "assign");
335
312
  const safeWithNavMock = jest.fn();
336
- const wrapper = mount(
313
+ render(
337
314
  <MemoryRouter>
338
315
  <div>
339
316
  <Button
@@ -353,8 +330,8 @@ describe("Button", () => {
353
330
  );
354
331
 
355
332
  // Act
356
- const buttonWrapper = wrapper.find("Button");
357
- buttonWrapper.simulate("click", {button: 0});
333
+ const button = screen.getByRole("button");
334
+ userEvent.click(button);
358
335
 
359
336
  // Assert
360
337
  expect(safeWithNavMock).toHaveBeenCalled();
@@ -365,7 +342,7 @@ describe("Button", () => {
365
342
  // Arrange
366
343
  jest.spyOn(window.location, "assign");
367
344
  const safeWithNavMock = jest.fn();
368
- const wrapper = mount(
345
+ render(
369
346
  <MemoryRouter>
370
347
  <div>
371
348
  <Button
@@ -386,19 +363,21 @@ describe("Button", () => {
386
363
  );
387
364
 
388
365
  // Act
389
- const buttonWrapper = wrapper.find("Button");
390
- buttonWrapper.simulate("click", {button: 0});
391
- await wait(0);
392
- buttonWrapper.update();
366
+ const button = screen.getByRole("button");
367
+ userEvent.click(button);
393
368
 
394
369
  // Assert
395
- expect(safeWithNavMock).toHaveBeenCalled();
396
- expect(window.location.assign).toHaveBeenCalledWith("/foo");
370
+ waitFor(() => {
371
+ expect(safeWithNavMock).toHaveBeenCalled();
372
+ });
373
+ waitFor(() => {
374
+ expect(window.location.assign).toHaveBeenCalledWith("/foo");
375
+ });
397
376
  });
398
377
 
399
378
  test("client-side navigation with unknown URL fails", () => {
400
379
  // Arrange
401
- const wrapper = mount(
380
+ render(
402
381
  <MemoryRouter>
403
382
  <div>
404
383
  <Button href="/unknown">Click me!</Button>
@@ -412,16 +391,16 @@ describe("Button", () => {
412
391
  );
413
392
 
414
393
  // Act
415
- const buttonWrapper = wrapper.find("Button");
416
- buttonWrapper.simulate("click", {button: 0});
394
+ const button = screen.getByRole("button");
395
+ userEvent.click(button);
417
396
 
418
397
  // Assert
419
- expect(wrapper.find("#foo")).not.toExist();
398
+ expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
420
399
  });
421
400
 
422
401
  test("client-side navigation with `skipClientNav` set to `true` fails", () => {
423
402
  // Arrange
424
- const wrapper = mount(
403
+ render(
425
404
  <MemoryRouter>
426
405
  <div>
427
406
  <Button href="/foo" skipClientNav>
@@ -437,16 +416,16 @@ describe("Button", () => {
437
416
  );
438
417
 
439
418
  // Act
440
- const buttonWrapper = wrapper.find("Button");
441
- buttonWrapper.simulate("click", {button: 0});
419
+ const button = screen.getByRole("button");
420
+ userEvent.click(button);
442
421
 
443
422
  // Assert
444
- expect(wrapper.find("#foo")).not.toExist();
423
+ expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
445
424
  });
446
425
 
447
426
  test("disallow navigation when href and disabled are both set", () => {
448
427
  // Arrange
449
- const wrapper = mount(
428
+ render(
450
429
  <MemoryRouter>
451
430
  <div>
452
431
  <Button href="/foo" disabled={true}>
@@ -462,17 +441,17 @@ describe("Button", () => {
462
441
  );
463
442
 
464
443
  // Act
465
- const buttonWrapper = wrapper.find("Button");
466
- buttonWrapper.simulate("click", {button: 0});
444
+ const button = screen.getByRole("button");
445
+ userEvent.click(button);
467
446
 
468
447
  // Assert
469
- expect(wrapper.find("#foo")).not.toExist();
448
+ expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
470
449
  });
471
450
 
472
451
  test("don't call beforeNav when href and disabled are both set", () => {
473
452
  // Arrange
474
453
  const beforeNavMock = jest.fn();
475
- const wrapper = mount(
454
+ render(
476
455
  <MemoryRouter>
477
456
  <div>
478
457
  <Button
@@ -492,8 +471,8 @@ describe("Button", () => {
492
471
  );
493
472
 
494
473
  // Act
495
- const buttonWrapper = wrapper.find("Button");
496
- buttonWrapper.simulate("click", {button: 0});
474
+ const button = screen.getByRole("button");
475
+ userEvent.click(button);
497
476
 
498
477
  // Assert
499
478
  expect(beforeNavMock).not.toHaveBeenCalled();
@@ -502,7 +481,7 @@ describe("Button", () => {
502
481
  test("don't call safeWithNav when href and disabled are both set", () => {
503
482
  // Arrange
504
483
  const safeWithNavMock = jest.fn();
505
- const wrapper = mount(
484
+ render(
506
485
  <MemoryRouter>
507
486
  <div>
508
487
  <Button
@@ -522,39 +501,45 @@ describe("Button", () => {
522
501
  );
523
502
 
524
503
  // Act
525
- const buttonWrapper = wrapper.find("Button");
526
- buttonWrapper.simulate("click", {button: 0});
504
+ const button = screen.getByRole("button");
505
+ userEvent.click(button);
527
506
 
528
507
  // Assert
529
508
  expect(safeWithNavMock).not.toHaveBeenCalled();
530
509
  });
531
510
 
532
- it("should set label on the underlying button", () => {
511
+ it("should set attribute on the underlying button", () => {
533
512
  // Arrange
534
- const wrapper = mount(
513
+
514
+ // Act
515
+ render(
535
516
  <Button id="foo" onClick={() => {}}>
536
517
  Click me!
537
518
  </Button>,
538
519
  );
539
520
 
540
- expect(wrapper.find("button")).toHaveProp({id: "foo"});
521
+ // Assert
522
+ expect(screen.getByRole("button")).toHaveAttribute("id", "foo");
541
523
  });
542
524
 
543
- it("should set label on the underlying link", () => {
525
+ it("should set attribute on the underlying link", () => {
544
526
  // Arrange
545
- const wrapper = mount(
527
+
528
+ // Act
529
+ render(
546
530
  <Button id="foo" href="/bar">
547
531
  Click me!
548
532
  </Button>,
549
533
  );
550
534
 
551
- expect(wrapper.find("a")).toHaveProp({id: "foo"});
535
+ // Assert
536
+ expect(screen.getByRole("button")).toHaveAttribute("href", "/bar");
552
537
  });
553
538
 
554
539
  describe("client-side navigation with keyboard", () => {
555
540
  it("should navigate on pressing the space key", () => {
556
541
  // Arrange
557
- const wrapper = mount(
542
+ render(
558
543
  <MemoryRouter>
559
544
  <div>
560
545
  <Button href="/foo">Click me!</Button>
@@ -568,21 +553,16 @@ describe("Button", () => {
568
553
  );
569
554
 
570
555
  // Act
571
- const buttonWrapper = wrapper.find("Button");
572
- buttonWrapper.simulate("keydown", {
573
- keyCode: keyCodes.space,
574
- });
575
- buttonWrapper.simulate("keyup", {
576
- keyCode: keyCodes.space,
577
- });
556
+ const button = screen.getByRole("button");
557
+ userEvent.type(button, "{space}");
578
558
 
579
559
  // Assert
580
- expect(wrapper.find("#foo")).toExist();
560
+ expect(screen.getByText("Hello, world!")).toBeInTheDocument();
581
561
  });
582
562
 
583
563
  it("should navigate on pressing the enter key", () => {
584
564
  // Arrange
585
- const wrapper = mount(
565
+ render(
586
566
  <MemoryRouter>
587
567
  <div>
588
568
  <Button href="/foo">Click me!</Button>
@@ -596,21 +576,16 @@ describe("Button", () => {
596
576
  );
597
577
 
598
578
  // Act
599
- const buttonWrapper = wrapper.find("Button");
600
- buttonWrapper.simulate("keydown", {
601
- keyCode: keyCodes.enter,
602
- });
603
- buttonWrapper.simulate("keyup", {
604
- keyCode: keyCodes.enter,
605
- });
579
+ const button = screen.getByRole("button");
580
+ userEvent.type(button, "{enter}");
606
581
 
607
582
  // Assert
608
- expect(wrapper.find("#foo")).toExist();
583
+ expect(screen.getByText("Hello, world!")).toBeInTheDocument();
609
584
  });
610
585
 
611
586
  test("beforeNav rejection blocks client-side navigation ", async () => {
612
587
  // Arrange
613
- const wrapper = mount(
588
+ render(
614
589
  <MemoryRouter>
615
590
  <div>
616
591
  <Button href="/foo" beforeNav={(e) => Promise.reject()}>
@@ -626,23 +601,16 @@ describe("Button", () => {
626
601
  );
627
602
 
628
603
  // Act
629
- const buttonWrapper = wrapper.find("Button");
630
- buttonWrapper.simulate("keydown", {
631
- keyCode: keyCodes.enter,
632
- });
633
- buttonWrapper.simulate("keyup", {
634
- keyCode: keyCodes.enter,
635
- });
636
- await wait(0);
637
- buttonWrapper.update();
604
+ const button = screen.getByRole("button");
605
+ userEvent.type(button, "{enter}");
638
606
 
639
607
  // Assert
640
- expect(wrapper.find("#foo")).not.toExist();
608
+ expect(screen.queryByText("Hello, world!")).not.toBeInTheDocument();
641
609
  });
642
610
 
643
611
  test("beforeNav resolution results in client-side navigation", async () => {
644
612
  // Arrange
645
- const wrapper = mount(
613
+ render(
646
614
  <MemoryRouter>
647
615
  <div>
648
616
  <Button
@@ -661,24 +629,19 @@ describe("Button", () => {
661
629
  );
662
630
 
663
631
  // Act
664
- const buttonWrapper = wrapper.find("Button");
665
- buttonWrapper.simulate("keydown", {
666
- keyCode: keyCodes.enter,
667
- });
668
- buttonWrapper.simulate("keyup", {
669
- keyCode: keyCodes.enter,
670
- });
671
- await wait(0);
672
- buttonWrapper.update();
632
+ const button = screen.getByRole("button");
633
+ userEvent.type(button, "{enter}");
673
634
 
674
635
  // Assert
675
- expect(wrapper.find("#foo")).toExist();
636
+ waitFor(() => {
637
+ expect(screen.getByText("Hello, world!")).toBeInTheDocument();
638
+ });
676
639
  });
677
640
 
678
641
  test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
679
642
  // Arrange
680
643
  jest.spyOn(window.location, "assign");
681
- const wrapper = mount(
644
+ render(
682
645
  <MemoryRouter>
683
646
  <div>
684
647
  <Button
@@ -698,15 +661,8 @@ describe("Button", () => {
698
661
  );
699
662
 
700
663
  // Act
701
- const buttonWrapper = wrapper.find("Button");
702
- buttonWrapper.simulate("keydown", {
703
- keyCode: keyCodes.enter,
704
- });
705
- buttonWrapper.simulate("keyup", {
706
- keyCode: keyCodes.enter,
707
- });
708
- await wait(0);
709
- buttonWrapper.update();
664
+ const button = screen.getByRole("button");
665
+ userEvent.type(button, "{enter}");
710
666
 
711
667
  // Assert
712
668
  expect(window.location.assign).toHaveBeenCalledWith("/foo");
@@ -715,7 +671,7 @@ describe("Button", () => {
715
671
  test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
716
672
  // Arrange
717
673
  jest.spyOn(window.location, "assign");
718
- const wrapper = mount(
674
+ render(
719
675
  <MemoryRouter>
720
676
  <div>
721
677
  <Button
@@ -735,25 +691,20 @@ describe("Button", () => {
735
691
  );
736
692
 
737
693
  // Act
738
- const buttonWrapper = wrapper.find("Button");
739
- buttonWrapper.simulate("keydown", {
740
- keyCode: keyCodes.enter,
741
- });
742
- buttonWrapper.simulate("keyup", {
743
- keyCode: keyCodes.enter,
744
- });
745
- await wait(0);
746
- buttonWrapper.update();
694
+ const button = screen.getByRole("button");
695
+ userEvent.type(button, "{enter}");
747
696
 
748
697
  // Assert
749
- expect(window.location.assign).toHaveBeenCalledWith("/foo");
698
+ waitFor(() => {
699
+ expect(window.location.assign).toHaveBeenCalledWith("/foo");
700
+ });
750
701
  });
751
702
 
752
703
  test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
753
704
  // Arrange
754
705
  jest.spyOn(window.location, "assign");
755
706
  const safeWithNavMock = jest.fn();
756
- const wrapper = mount(
707
+ render(
757
708
  <MemoryRouter>
758
709
  <div>
759
710
  <Button
@@ -773,17 +724,16 @@ describe("Button", () => {
773
724
  );
774
725
 
775
726
  // Act
776
- const buttonWrapper = wrapper.find("Button");
777
- buttonWrapper.simulate("keydown", {
778
- keyCode: keyCodes.enter,
779
- });
780
- buttonWrapper.simulate("keyup", {
781
- keyCode: keyCodes.enter,
782
- });
727
+ const button = screen.getByRole("button");
728
+ userEvent.type(button, "{enter}");
783
729
 
784
730
  // Assert
785
- expect(safeWithNavMock).toHaveBeenCalled();
786
- expect(window.location.assign).toHaveBeenCalledWith("/foo");
731
+ waitFor(() => {
732
+ expect(safeWithNavMock).toHaveBeenCalled();
733
+ });
734
+ waitFor(() => {
735
+ expect(window.location.assign).toHaveBeenCalledWith("/foo");
736
+ });
787
737
  });
788
738
  });
789
739
 
@@ -841,14 +791,15 @@ describe("Button", () => {
841
791
  test("submit button within form via click", () => {
842
792
  // Arrange
843
793
  const submitFnMock = jest.fn();
844
- const wrapper = mount(
794
+ render(
845
795
  <form onSubmit={submitFnMock}>
846
796
  <Button type="submit">Click me!</Button>
847
797
  </form>,
848
798
  );
849
799
 
850
800
  // Act
851
- wrapper.find("button").simulate("click");
801
+ const button = screen.getByRole("button");
802
+ userEvent.click(button);
852
803
 
853
804
  // Assert
854
805
  expect(submitFnMock).toHaveBeenCalled();
@@ -857,19 +808,15 @@ describe("Button", () => {
857
808
  test("submit button within form via keyboard", () => {
858
809
  // Arrange
859
810
  const submitFnMock = jest.fn();
860
- const wrapper = mount(
811
+ render(
861
812
  <form onSubmit={submitFnMock}>
862
813
  <Button type="submit">Click me!</Button>
863
814
  </form>,
864
815
  );
865
816
 
866
817
  // Act
867
- wrapper.find("button").simulate("keydown", {
868
- keyCode: keyCodes.enter,
869
- });
870
- wrapper.find("button").simulate("keyup", {
871
- keyCode: keyCodes.enter,
872
- });
818
+ const button = screen.getByRole("button");
819
+ userEvent.type(button, "{enter}");
873
820
 
874
821
  // Assert
875
822
  expect(submitFnMock).toHaveBeenCalled();
@@ -877,12 +824,12 @@ describe("Button", () => {
877
824
 
878
825
  test("submit button doesn't break if it's not in a form", () => {
879
826
  // Arrange
880
- const wrapper = mount(<Button type="submit">Click me!</Button>);
827
+ render(<Button type="submit">Click me!</Button>);
881
828
 
882
829
  // Act
883
830
  expect(() => {
884
831
  // Assert
885
- wrapper.find("button").simulate("click");
832
+ userEvent.click(screen.getByRole("button"));
886
833
  }).not.toThrow();
887
834
  });
888
835
  });