You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
140
+
</InlineAlert>
141
+
142
+
Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
143
+
the `CheckboxGroup` tester in your test cases. This gives you access to `CheckboxGroup` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
144
+
The example test case below shows how you might go about setting up the `CheckboxGroup` tester, use it to simulate checkbox selection, and verify the checkbox group's state after each interaction.
145
+
146
+
```ts
147
+
// CheckboxGroup.test.ts
148
+
import {render} from'@testing-library/react';
149
+
import {User} from'@react-aria/test-utils';
150
+
151
+
let testUtilUser =newUser({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
152
+
// ...
153
+
154
+
it('CheckboxGroup can select multiple checkboxes', asyncfunction () {
155
+
// Render your test component/app and initialize the checkbox group tester
156
+
let {getByTestId} =render(
157
+
<CheckboxGroupdata-testid="test-checkboxgroup">
158
+
...
159
+
</CheckboxGroup>
160
+
);
161
+
let checkboxGroupTester =testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
<Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
373
+
</InlineAlert>
374
+
375
+
Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
376
+
the `ComboBox` tester in your test cases. This gives you access to `ComboBox` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
377
+
The example test case below shows how you might go about setting up the `ComboBox` tester, use it to simulate option selection, and verify the combobox's state after each interaction.
378
+
379
+
```ts
380
+
// Combobox.test.ts
381
+
import {render} from'@testing-library/react';
382
+
import {User} from'@react-aria/test-utils';
383
+
384
+
let testUtilUser =newUser({interactionType: 'mouse'});
385
+
// ...
386
+
387
+
it('ComboBox can select an option via keyboard', asyncfunction () {
388
+
// Render your test component/app and initialize the combobox tester
389
+
let {getByTestId} =render(
390
+
<ComboBoxdata-testid="test-combobox">
391
+
...
392
+
</ComboBox>
393
+
);
394
+
let comboboxTester =testUtilUser.createTester('ComboBox', {root: getByTestId('test-combobox'), interactionType: 'keyboard'});
<Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
953
+
</InlineAlert>
954
+
955
+
Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
956
+
the `GridList` tester in your test cases. This gives you access to `GridList` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
957
+
The example test case below shows how you might go about setting up the `GridList` tester, use it to simulate item selection, and verify the gridlist's state after each interaction.
<Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
444
+
</InlineAlert>
445
+
446
+
Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
447
+
the `ListBox` tester in your test cases. This gives you access to `ListBox` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
448
+
The example test case below shows how you might go about setting up the `ListBox` tester, use it to simulate option selection, and verify the listbox's state after each interaction.
449
+
450
+
```ts
451
+
// ListBox.test.ts
452
+
import {render} from'@testing-library/react';
453
+
import {User} from'@react-aria/test-utils';
454
+
455
+
let testUtilUser =newUser({interactionType: 'mouse'});
456
+
// ...
457
+
458
+
it('ListBox can select an option via keyboard', asyncfunction () {
459
+
// Render your test component/app and initialize the listbox tester
<Content>Please note that this library uses [@testing-library/react@16](https://www.npmjs.com/package/@testing-library/react) and [@testing-library/user-event@14](https://www.npmjs.com/package/@testing-library/user-event). This means that you need to be on React 18+ in order for these utilities to work.</Content>
606
+
</InlineAlert>
607
+
608
+
Once installed, you can access the `User` that `@react-aria/test-utils` provides in your test file as shown below. This user only needs to be initialized once and then can be used to generate
609
+
the `Menu` tester in your test cases. This gives you access to `Menu` specific utilities that you can then call within your test to query for specific subcomponents or simulate common interactions.
610
+
The example test case below shows how you might go about setting up the `Menu` tester, use it to find and open a submenu, and verify the menu's state after each interaction.
611
+
612
+
```ts
613
+
// Menu.test.ts
614
+
import {render} from'@testing-library/react';
615
+
import {User} from'@react-aria/test-utils';
616
+
617
+
let testUtilUser =newUser({interactionType: 'mouse'});
618
+
// ...
619
+
620
+
it('Menu can open its submenu via keyboard', asyncfunction () {
621
+
// Render your test component/app and initialize the menu tester
0 commit comments