Convert ReactDOMInvalidARIAHook to createRoot (#28129)
Sebastian Silbermann committed
Jan 27, 2024 at 22:08 UTC
3e58b0af0caebf5f1b507ce5f360c85cb57bf528
1 file changed
+24
-16
packages/react-dom/src/__tests__/ReactDOMInvalidARIAHook-test.js
+24
-16
@@ -11,31 +11,37 @@
11
12
describe('ReactDOMInvalidARIAHook', () => {
13
let React;
14
- let ReactTestUtils;
14
+ let ReactDOMClient;
15
let mountComponent;
16
+ let act;
17
18
beforeEach(() => {
19
jest.resetModules();
20
React = require('react');
20
- ReactTestUtils = require('react-dom/test-utils');
21
+ ReactDOMClient = require('react-dom/client');
22
+ act = require('internal-test-utils').act;
23
22
- mountComponent = function (props) {
23
- ReactTestUtils.renderIntoDocument(<div {...props} />);
24
+ mountComponent = async function (props) {
25
+ const container = document.createElement('div');
26
+ const root = ReactDOMClient.createRoot(container);
27
+ await act(() => {
28
+ root.render(<div {...props} />);
29
+ });
30
};
31
});
32
33
describe('aria-* props', () => {
28
- it('should allow valid aria-* props', () => {
29
- mountComponent({'aria-label': 'Bumble bees'});
34
+ it('should allow valid aria-* props', async () => {
35
+ await mountComponent({'aria-label': 'Bumble bees'});
36
});
31
- it('should warn for one invalid aria-* prop', () => {
32
- expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev(
37
+ it('should warn for one invalid aria-* prop', async () => {
38
+ await expect(() => mountComponent({'aria-badprop': 'maybe'})).toErrorDev(
39
'Warning: Invalid aria prop `aria-badprop` on <div> tag. ' +
40
'For details, see https://reactjs.org/link/invalid-aria-props',
41
);
42
});
37
- it('should warn for many invalid aria-* props', () => {
38
- expect(() =>
43
+ it('should warn for many invalid aria-* props', async () => {
44
+ await expect(() =>
45
mountComponent({
46
'aria-badprop': 'Very tall trees',
47
'aria-malprop': 'Turbulent seas',
@@ -45,25 +51,27 @@ describe('ReactDOMInvalidARIAHook', () => {
51
'tag. For details, see https://reactjs.org/link/invalid-aria-props',
52
);
53
});
48
- it('should warn for an improperly cased aria-* prop', () => {
54
+ it('should warn for an improperly cased aria-* prop', async () => {
55
// The valid attribute name is aria-haspopup.
50
- expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev(
56
+ await expect(() => mountComponent({'aria-hasPopup': 'true'})).toErrorDev(
57
'Warning: Unknown ARIA attribute `aria-hasPopup`. ' +
58
'Did you mean `aria-haspopup`?',
59
);
60
});
61
56
- it('should warn for use of recognized camel case aria attributes', () => {
62
+ it('should warn for use of recognized camel case aria attributes', async () => {
63
// The valid attribute name is aria-haspopup.
58
- expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev(
64
+ await expect(() => mountComponent({ariaHasPopup: 'true'})).toErrorDev(
65
'Warning: Invalid ARIA attribute `ariaHasPopup`. ' +
66
'Did you mean `aria-haspopup`?',
67
);
68
});
69
64
- it('should warn for use of unrecognized camel case aria attributes', () => {
70
+ it('should warn for use of unrecognized camel case aria attributes', async () => {
71
// The valid attribute name is aria-haspopup.
66
- expect(() => mountComponent({ariaSomethingInvalid: 'true'})).toErrorDev(
72
+ await expect(() =>
73
+ mountComponent({ariaSomethingInvalid: 'true'}),
74
+ ).toErrorDev(
75
'Warning: Invalid ARIA attribute `ariaSomethingInvalid`. ARIA ' +
76
'attributes follow the pattern aria-* and must be lowercase.',
77
);