Skip to content

Commit 025842c

Browse files
snowystingersnowystinger
authored
Update react testing library (#6467)
* Update react testing library
1 parent 10bac54 commit 025842c

File tree

7 files changed

+70
-59
lines changed

7 files changed

+70
-59
lines changed

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,12 @@
101101
"@storybook/test-runner": "^0.16.0",
102102
"@storybook/testing-library": "^0.2.2",
103103
"@swc/jest": "^0.2.36",
104-
"@testing-library/dom": "^9.2.0",
104+
"@testing-library/dom": "^10.1.0",
105105
"@testing-library/jest-dom": "^5.16.5",
106-
"@testing-library/react": "^14.0.0",
107-
"@testing-library/user-event": "^14.4.3",
108-
"@types/react": "^18.2.28",
106+
"@testing-library/react": "^15.0.0",
107+
"@testing-library/user-event": "^14.5.2",
108+
"@types/react": "^18.3.0",
109+
"@types/react-dom": "^18.3.0",
109110
"@types/storybook__react": "^4.0.2",
110111
"@typescript-eslint/eslint-plugin": "^6.7.5",
111112
"@typescript-eslint/parser": "^6.7.5",
@@ -197,7 +198,6 @@
197198
"@babel/runtime": "7.24.4",
198199
"@babel/preset-env": "7.24.4",
199200
"@babel/types": "7.24.0",
200-
"@types/react": "18.2.28",
201201
"postcss": "8.4.24",
202202
"postcss-custom-properties": "13.2.0",
203203
"postcss-import": "15.1.0",

‎packages/@react-spectrum/avatar/test/Avatar.test.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ import {Avatar} from '../';
22
import React from 'react';
33
import {render, screen} from '@react-spectrum/test-utils-internal';
44

5+
let isOldReact = parseInt(React.version, 10) < 18;
6+
57
describe('Avatar', () => {
68
it('renders an avatar image', () => {
79
render(<Avatar src="http://localhost/some_image.png" />);
8-
expect(screen.getByRole('img')).toBeInTheDocument();
9-
expect(screen.getByRole('img')).toHaveAttribute('src', 'http://localhost/some_image.png');
10+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toBeInTheDocument();
11+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toHaveAttribute('src', 'http://localhost/some_image.png');
1012
});
1113

1214
it('can render an avatar image with an alt', () => {
@@ -17,15 +19,15 @@ describe('Avatar', () => {
1719
describe('when given a custom size', () => {
1820
it('supports custom sizes in units, such as pixels', () => {
1921
render(<Avatar src="http://localhost/some_image.png" size="80px" />);
20-
expect(screen.getByRole('img')).toHaveStyle({
22+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toHaveStyle({
2123
height: '80px',
2224
width: '80px'
2325
});
2426
});
2527

2628
it('supports custom sizes in numbers', () => {
2729
render(<Avatar src="http://localhost/some_image.png" size={80} />);
28-
expect(screen.getByRole('img')).toHaveStyle({
30+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toHaveStyle({
2931
height: '80px',
3032
width: '80px'
3133
});
@@ -34,12 +36,12 @@ describe('Avatar', () => {
3436

3537
it('supports custom class names', () => {
3638
render(<Avatar src="http://localhost/some_image.png" UNSAFE_className="my-class" />);
37-
expect(screen.getByRole('img')).toHaveAttribute('class', expect.stringContaining('my-class'));
39+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toHaveAttribute('class', expect.stringContaining('my-class'));
3840
});
3941

4042
it('supports style props', () => {
4143
render(<Avatar src="http://localhost/some_image.png" isHidden />);
42-
expect(screen.getByRole('img', {hidden: true})).toBeInTheDocument();
44+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation', {hidden: true})).toBeInTheDocument();
4345
});
4446

4547
it('supports custom DOM props', () => {
@@ -50,7 +52,7 @@ describe('Avatar', () => {
5052
describe('when isDisabled = true', () => {
5153
it('renders a disabled avatar image', () => {
5254
render(<Avatar src="http://localhost/some_image.png" isDisabled />);
53-
expect(screen.getByRole('img')).toHaveAttribute('class', expect.stringMatching(/disabled/i));
55+
expect(screen.getByRole(isOldReact ? 'img' : 'presentation')).toHaveAttribute('class', expect.stringMatching(/disabled/i));
5456
});
5557
});
5658
});

‎packages/@react-spectrum/card/test/Card.test.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import userEvent from '@testing-library/user-event';
2121
let {Default, DefaultPreviewAlt, NoDescription} = composeStories(defaultStories);
2222
let {Quiet} = composeStories(quietStories);
2323

24+
let isOldReact = parseInt(React.version, 10) < 18;
25+
2426
describe('Card', function () {
2527
let user;
2628
beforeAll(() => {
@@ -30,7 +32,7 @@ describe('Card', function () {
3032
let {getByRole, getByLabelText, getAllByRole} = render(<Card {...Default.args} />);
3133
let card = getByRole('article');
3234
let heading = getByRole('heading', {level: 3});
33-
let images = getAllByRole('img');
35+
let images = getAllByRole(isOldReact ? 'img' : 'presentation');
3436
let labelledCard = getByLabelText(heading.textContent);
3537
expect(card).toBe(labelledCard);
3638
expect(card).toHaveAccessibleDescription('Description');
@@ -63,7 +65,7 @@ describe('Card', function () {
6365
let {getByRole, getAllByRole, getByLabelText} = render(<Card {...Quiet.args} />);
6466
let card = getByRole('article');
6567
let heading = getByRole('heading', {level: 3});
66-
let images = getAllByRole('img');
68+
let images = getAllByRole(isOldReact ? 'img' : 'presentation');
6769
let labelledCard = getByLabelText(heading.textContent);
6870
expect(card).toBe(labelledCard);
6971
expect(card).toHaveAccessibleDescription('Description');

‎packages/@react-spectrum/card/test/CardView.test.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import themeLight from '@adobe/spectrum-css-temp/vars/spectrum-light-unique.css'
2626
import {useCollator} from '@react-aria/i18n';
2727
import userEvent from '@testing-library/user-event';
2828

29+
let isOldReact = parseInt(React.version, 10) < 18;
30+
2931
let {falsyItems} = stories;
3032
let {FalsyIds} = composeStories(stories);
3133

@@ -177,7 +179,7 @@ describe('CardView', function () {
177179
let cell = within(row).getByRole('gridcell');
178180
expect(cell).toBeTruthy();
179181

180-
let image = within(cell).getByRole('img');
182+
let image = within(cell).getByRole(isOldReact ? 'img' : 'presentation');
181183
expect(image).toHaveAttribute('src');
182184
expect(within(cell).getByText('Description')).toBeTruthy();
183185
expect(within(cell).getByText('PNG')).toBeTruthy();
@@ -208,7 +210,7 @@ describe('CardView', function () {
208210
let cell = within(row).getByRole('gridcell');
209211
expect(cell).toBeTruthy();
210212

211-
let image = within(cell).getByRole('img');
213+
let image = within(cell).getByRole(isOldReact ? 'img' : 'presentation');
212214
expect(image).toHaveAttribute('src');
213215
expect(within(cell).getByText('Description')).toBeTruthy();
214216
expect(within(cell).getByText('PNG')).toBeTruthy();
@@ -237,7 +239,7 @@ describe('CardView', function () {
237239
let cell = within(row).getByRole('gridcell');
238240
expect(cell).toBeTruthy();
239241

240-
let image = within(cell).getByRole('img');
242+
let image = within(cell).getByRole(isOldReact ? 'img' : 'presentation');
241243
expect(image).toHaveAttribute('src');
242244
expect(within(cell).getByText('long description', {exact: false})).toBeTruthy();
243245
expect(within(cell).getByText('PNG')).toBeTruthy();
@@ -256,7 +258,7 @@ describe('CardView', function () {
256258
});
257259

258260
let grid = tree.getByRole('grid');
259-
let wrappers = within(grid).getAllByRole('presentation');
261+
let wrappers = within(grid).getAllByRole('presentation').filter(node => node.tagName !== 'IMG');
260262
let currentTop;
261263
let currentLeft;
262264
let expectedWidth;
@@ -555,7 +557,7 @@ describe('CardView', function () {
555557
});
556558

557559
let grid = tree.getByRole('grid');
558-
let wrappers = within(grid).getAllByRole('presentation');
560+
let wrappers = within(grid).getAllByRole('presentation').filter(node => node.tagName !== 'IMG');
559561
let currentTop;
560562
let expectedLeft;
561563
let expectedHeight;
@@ -723,7 +725,7 @@ describe('CardView', function () {
723725
});
724726

725727
let grid = tree.getByRole('grid');
726-
let wrappers = within(grid).getAllByRole('presentation');
728+
let wrappers = within(grid).getAllByRole('presentation').filter(node => node.tagName !== 'IMG');
727729
let expectedWidth;
728730
let columnLefts = [];
729731
let columnHeights = [];

‎packages/@react-spectrum/test-utils/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"@swc/helpers": "^0.5.0"
2929
},
3030
"peerDependencies": {
31-
"@testing-library/react": "^13.0.0 || ^14.0.0",
31+
"@testing-library/react": "^15.0.0",
3232
"@testing-library/user-event": "^13.0.0 || ^14.0.0",
3333
"jest": "^27.0.0",
3434
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"

‎packages/dev/test-utils/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"resolve": "^1.17.0"
2525
},
2626
"peerDependencies": {
27-
"@testing-library/react": "^14.0.0",
27+
"@testing-library/react": "^15.0.0",
2828
"@testing-library/user-event": "^14.4.3",
2929
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
3030
"react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"

‎yarn.lock

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5307,15 +5307,29 @@
53075307
dependencies:
53085308
"@swc/counter" "^0.1.3"
53095309

5310-
"@testing-library/dom@^9.0.0", "@testing-library/dom@^9.2.0":
5311-
version "9.2.0"
5312-
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.2.0.tgz#0e1f45e956f2a16f471559c06edd8827c4832f04"
5313-
integrity sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==
5310+
"@testing-library/dom@^10.0.0", "@testing-library/dom@^10.1.0":
5311+
version "10.1.0"
5312+
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6"
5313+
integrity sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==
53145314
dependencies:
53155315
"@babel/code-frame" "^7.10.4"
53165316
"@babel/runtime" "^7.12.5"
53175317
"@types/aria-query" "^5.0.1"
5318-
aria-query "^5.0.0"
5318+
aria-query "5.3.0"
5319+
chalk "^4.1.0"
5320+
dom-accessibility-api "^0.5.9"
5321+
lz-string "^1.5.0"
5322+
pretty-format "^27.0.2"
5323+
5324+
"@testing-library/dom@^9.0.0":
5325+
version "9.3.4"
5326+
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
5327+
integrity sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==
5328+
dependencies:
5329+
"@babel/code-frame" "^7.10.4"
5330+
"@babel/runtime" "^7.12.5"
5331+
"@types/aria-query" "^5.0.1"
5332+
aria-query "5.1.3"
53195333
chalk "^4.1.0"
53205334
dom-accessibility-api "^0.5.9"
53215335
lz-string "^1.5.0"
@@ -5336,25 +5350,20 @@
53365350
lodash "^4.17.15"
53375351
redent "^3.0.0"
53385352

5339-
"@testing-library/react@^14.0.0":
5340-
version "14.0.0"
5341-
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.0.0.tgz#59030392a6792450b9ab8e67aea5f3cc18d6347c"
5342-
integrity sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==
5353+
"@testing-library/react@^15.0.0":
5354+
version "15.0.7"
5355+
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-15.0.7.tgz#ff733ce0893c875cb5a47672e8e772897128f4ae"
5356+
integrity sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==
53435357
dependencies:
53445358
"@babel/runtime" "^7.12.5"
5345-
"@testing-library/dom" "^9.0.0"
5359+
"@testing-library/dom" "^10.0.0"
53465360
"@types/react-dom" "^18.0.0"
53475361

5348-
"@testing-library/user-event@^14.4.0":
5362+
"@testing-library/user-event@^14.4.0", "@testing-library/user-event@^14.5.2":
53495363
version "14.5.2"
53505364
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
53515365
integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
53525366

5353-
"@testing-library/user-event@^14.4.3":
5354-
version "14.4.3"
5355-
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.4.3.tgz#af975e367743fa91989cd666666aec31a8f50591"
5356-
integrity sha512-kCUc5MEwaEMakkO5x7aoD+DLi02ehmEM2QCGWvNqAS1dV/fAvORWEjnjsEIvml59M7Y5kCkWN6fCCyPOe8OL6Q==
5357-
53585367
"@tootallnate/once@2":
53595368
version "2.0.0"
53605369
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -5762,27 +5771,21 @@
57625771
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
57635772
integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
57645773

5765-
"@types/react-dom@^18.0.0":
5766-
version "18.2.4"
5767-
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.4.tgz#13f25bfbf4e404d26f62ac6e406591451acba9e0"
5768-
integrity sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==
5774+
"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
5775+
version "18.3.0"
5776+
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
5777+
integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
57695778
dependencies:
57705779
"@types/react" "*"
57715780

5772-
"@types/react@*", "@types/react@18.2.28", "@types/react@>=16", "@types/react@^18.2.28":
5773-
version "18.2.28"
5774-
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.28.tgz#86877465c0fcf751659a36c769ecedfcfacee332"
5775-
integrity sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==
5781+
"@types/react@*", "@types/react@>=16", "@types/react@^18.3.0":
5782+
version "18.3.0"
5783+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.0.tgz#2e6ac50dea2f68f774b20f1bd536ef82365cd64a"
5784+
integrity sha512-DiUcKjzE6soLyln8NNZmyhcQjVv+WsUIFSqetMN0p8927OztKT4VTfFTqsbAi5oAGIcgOmOajlfBqyptDDjZRw==
57765785
dependencies:
57775786
"@types/prop-types" "*"
5778-
"@types/scheduler" "*"
57795787
csstype "^3.0.2"
57805788

5781-
"@types/scheduler@*":
5782-
version "0.16.2"
5783-
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
5784-
integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
5785-
57865789
"@types/semver@^7.3.4":
57875790
version "7.5.8"
57885791
resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
@@ -6539,18 +6542,20 @@ aria-hidden@^1.2.3:
65396542
dependencies:
65406543
tslib "^2.0.0"
65416544

6542-
aria-query@^5.0.0:
6543-
version "5.0.0"
6544-
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
6545-
integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
6546-
6547-
aria-query@^5.1.3:
6545+
[email protected]:
65486546
version "5.1.3"
65496547
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
65506548
integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
65516549
dependencies:
65526550
deep-equal "^2.0.5"
65536551

6552+
[email protected], aria-query@^5.0.0, aria-query@^5.1.3:
6553+
version "5.3.0"
6554+
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
6555+
integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
6556+
dependencies:
6557+
dequal "^2.0.3"
6558+
65546559
arr-diff@^1.0.1:
65556560
version "1.1.0"
65566561
resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
@@ -9437,7 +9442,7 @@ dequal@^2.0.0:
94379442
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
94389443
integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
94399444

9440-
dequal@^2.0.2:
9445+
dequal@^2.0.2, dequal@^2.0.3:
94419446
version "2.0.3"
94429447
resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
94439448
integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==

0 commit comments

Comments
 (0)