diff --git a/test/TreeDataGrid.test.tsx b/test/TreeDataGrid.test.tsx
index 5ea7a44727..1fa9be75b5 100644
--- a/test/TreeDataGrid.test.tsx
+++ b/test/TreeDataGrid.test.tsx
@@ -237,7 +237,7 @@ test('should set aria-attributes', async () => {
test('should select rows in a group', async () => {
setup(['year', 'country']);
- const headerCheckbox = screen.getByLabelText('Select All');
+ const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' });
expect(headerCheckbox).not.toBeChecked();
// expand group
@@ -249,7 +249,9 @@ test('should select rows in a group', async () => {
expect(screen.queryAllByRole('row', { selected: true })).toHaveLength(0);
// select parent row
- await userEvent.click(within(groupCell1.parentElement!).getByLabelText('Select Group'));
+ await userEvent.click(
+ within(groupCell1.parentElement!).getByRole('checkbox', { name: 'Select Group' })
+ );
let selectedRows = screen.getAllByRole('row', { selected: true });
expect(selectedRows).toHaveLength(4);
expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '6');
@@ -258,13 +260,15 @@ test('should select rows in a group', async () => {
expect(selectedRows[3]).toHaveAttribute('aria-rowindex', '10');
// unselecting child should unselect the parent row
- await userEvent.click(within(selectedRows[3]).getByLabelText('Select'));
+ await userEvent.click(within(selectedRows[3]).getByRole('checkbox', { name: 'Select' }));
selectedRows = screen.getAllByRole('row', { selected: true });
expect(selectedRows).toHaveLength(1);
expect(selectedRows[0]).toHaveAttribute('aria-rowindex', '7');
// select child group
- const checkbox = within(groupCell2.parentElement!).getByLabelText('Select Group');
+ const checkbox = within(groupCell2.parentElement!).getByRole('checkbox', {
+ name: 'Select Group'
+ });
await userEvent.click(checkbox);
selectedRows = screen.getAllByRole('row', { selected: true });
expect(selectedRows).toHaveLength(4);
diff --git a/test/column/renderEditCell.test.tsx b/test/column/renderEditCell.test.tsx
index f1894084c6..82535ba96f 100644
--- a/test/column/renderEditCell.test.tsx
+++ b/test/column/renderEditCell.test.tsx
@@ -16,25 +16,25 @@ describe('Editor', () => {
it('should open editor on double click', async () => {
render();
await userEvent.click(getCellsAtRowIndex(0)[0]);
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
await userEvent.dblClick(getCellsAtRowIndex(0)[0]);
- expect(screen.getByLabelText('col1-editor')).toHaveValue(1);
+ expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1);
await userEvent.keyboard('2');
await userEvent.tab();
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^21$/);
});
it('should open and commit changes on enter', async () => {
render();
await userEvent.click(getCellsAtRowIndex(0)[0]);
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
await userEvent.keyboard('{enter}');
- expect(screen.getByLabelText('col1-editor')).toHaveValue(1);
+ expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1);
await userEvent.keyboard('3{enter}');
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^31$/);
expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
});
it('should open editor when user types', async () => {
@@ -47,9 +47,9 @@ describe('Editor', () => {
it('should close editor and discard changes on escape', async () => {
render();
await userEvent.dblClick(getCellsAtRowIndex(0)[0]);
- expect(screen.getByLabelText('col1-editor')).toHaveValue(1);
+ expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1);
await userEvent.keyboard('2222{escape}');
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1$/);
expect(getCellsAtRowIndex(0)[0]).toHaveFocus();
});
@@ -57,7 +57,7 @@ describe('Editor', () => {
it('should commit changes and close editor when clicked outside', async () => {
render();
await userEvent.dblClick(getCellsAtRowIndex(0)[0]);
- const editor = screen.getByLabelText('col1-editor');
+ const editor = screen.getByRole('spinbutton', { name: 'col1-editor' });
expect(editor).toHaveValue(1);
await userEvent.keyboard('2222');
await userEvent.click(screen.getByText('outside'));
@@ -103,9 +103,9 @@ describe('Editor', () => {
await scrollGrid({ scrollTop: 2000 });
expect(getCellsAtRowIndex(0)).toHaveLength(1);
- expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('spinbutton', { name: 'col1-editor' })).not.toBeInTheDocument();
await userEvent.keyboard('123');
- expect(screen.getByLabelText('col1-editor')).toHaveValue(1230);
+ expect(screen.getByRole('spinbutton', { name: 'col1-editor' })).toHaveValue(1230);
const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
await userEvent.keyboard('{enter}');
expect(spy).toHaveBeenCalled();
@@ -117,13 +117,13 @@ describe('Editor', () => {
const cell = getCellsAtRowIndex(0)[1];
expect(cell).not.toHaveAttribute('aria-readonly');
await userEvent.dblClick(cell);
- expect(screen.getByLabelText('col2-editor')).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
});
it('should be editable if an editor is specified and editable is set to true', async () => {
render();
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- expect(screen.getByLabelText('col2-editor')).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
});
it('should not be editable if editable is false', async () => {
@@ -131,16 +131,16 @@ describe('Editor', () => {
const cell = getCellsAtRowIndex(0)[1];
expect(cell).toHaveAttribute('aria-readonly', 'true');
await userEvent.dblClick(cell);
- expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument();
});
it('should not be editable if editable function returns false', async () => {
render( row.col1 === 2} />);
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument();
await userEvent.dblClick(getCellsAtRowIndex(1)[1]);
- expect(screen.getByLabelText('col2-editor')).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
});
});
@@ -148,7 +148,7 @@ describe('Editor', () => {
it('should detect outside click if editor is rendered in a portal', async () => {
render();
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- const editor1 = screen.getByLabelText('col2-editor');
+ const editor1 = screen.getByRole('textbox', { name: 'col2-editor' });
expect(editor1).toHaveValue('a1');
await userEvent.keyboard('23');
// The cell value should update as the editor value is changed
@@ -164,7 +164,7 @@ describe('Editor', () => {
expect(getCellsAtRowIndex(0)[1]).not.toHaveFocus();
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- const editor2 = screen.getByLabelText('col2-editor');
+ const editor2 = screen.getByRole('textbox', { name: 'col2-editor' });
await userEvent.click(editor2);
await userEvent.keyboard('{enter}');
expect(getCellsAtRowIndex(0)[1]).toHaveFocus();
@@ -179,7 +179,7 @@ describe('Editor', () => {
/>
);
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- const editor = screen.getByLabelText('col2-editor');
+ const editor = screen.getByRole('textbox', { name: 'col2-editor' });
expect(editor).toBeInTheDocument();
await userEvent.click(screen.getByText('outside'));
await act(async () => {
@@ -205,7 +205,7 @@ describe('Editor', () => {
await userEvent.keyboard('yz{enter}');
expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
await userEvent.keyboard('x');
- expect(screen.queryByLabelText('col2-editor')).not.toBeInTheDocument();
+ expect(screen.queryByRole('textbox', { name: 'col2-editor' })).not.toBeInTheDocument();
});
it('should prevent navigation if onCellKeyDown prevents the default event', async () => {
@@ -283,9 +283,9 @@ describe('Editor', () => {
>
);
- const outerInput = screen.getByLabelText('outer-input');
+ const outerInput = screen.getByRole('textbox', { name: 'outer-input' });
await userEvent.dblClick(getCellsAtRowIndex(0)[0]);
- const col1Input = screen.getByLabelText('col1-input');
+ const col1Input = screen.getByRole('textbox', { name: 'col1-input' });
expect(col1Input).toHaveFocus();
await userEvent.click(outerInput);
expect(outerInput).toHaveFocus();
@@ -295,7 +295,7 @@ describe('Editor', () => {
expect(outerInput).toHaveFocus();
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- const col2Input = screen.getByLabelText('col2-input');
+ const col2Input = screen.getByRole('textbox', { name: 'col2-input' });
expect(col2Input).toHaveFocus();
await userEvent.click(outerInput);
expect(outerInput).toHaveFocus();
diff --git a/test/events.test.tsx b/test/events.test.tsx
index 33359b44a6..df45dfe4de 100644
--- a/test/events.test.tsx
+++ b/test/events.test.tsx
@@ -84,7 +84,7 @@ describe('Events', () => {
await userEvent.click(getCellsAtRowIndex(0)[0]);
expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
await userEvent.click(getCellsAtRowIndex(0)[1]);
- expect(screen.getByLabelText('col2-editor')).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
});
it('should not open editor editor on double click if onCellDoubleClick prevents default', async () => {
@@ -100,7 +100,7 @@ describe('Events', () => {
await userEvent.dblClick(getCellsAtRowIndex(0)[0]);
expect(screen.queryByLabelText('col1-editor')).not.toBeInTheDocument();
await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
- expect(screen.getByLabelText('col2-editor')).toBeInTheDocument();
+ expect(screen.getByRole('textbox', { name: 'col2-editor' })).toBeInTheDocument();
});
it('should call onCellContextMenu when cell is right clicked', async () => {
diff --git a/test/rowSelection.test.tsx b/test/rowSelection.test.tsx
index 25d57d8aaa..6a736c7121 100644
--- a/test/rowSelection.test.tsx
+++ b/test/rowSelection.test.tsx
@@ -47,7 +47,7 @@ function testSelection(rowIdx: number, isSelected: boolean) {
}
async function toggleSelection(rowIdx: number, shift = false) {
- const element = within(getCellsAtRowIndex(rowIdx)[0]).getByLabelText('Select');
+ const element = within(getCellsAtRowIndex(rowIdx)[0]).getByRole('checkbox', { name: 'Select' });
const user = userEvent.setup();
if (shift) await user.keyboard('{Shift>}');
await user.click(element);
@@ -81,7 +81,7 @@ test('toggle selection using keyboard', async () => {
test('select/deselect all rows when header checkbox is clicked', async () => {
setup();
- const headerCheckbox = screen.getByLabelText('Select All');
+ const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' });
expect(headerCheckbox).not.toBeChecked();
await userEvent.click(headerCheckbox);
testSelection(0, true);
@@ -102,7 +102,7 @@ test('select/deselect all rows when header checkbox is clicked', async () => {
test('header checkbox is not checked when there are no rows', () => {
setup([]);
- expect(screen.getByLabelText('Select All')).not.toBeChecked();
+ expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked();
});
test('header checkbox is not necessarily checked when selectedRows.size === rows.length', () => {
@@ -115,7 +115,7 @@ test('header checkbox is not necessarily checked when selectedRows.size === rows
/>
);
- expect(screen.getByLabelText('Select All')).not.toBeChecked();
+ expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked();
});
test('header checkbox is not necessarily checked when selectedRows.size > rows.length', () => {
@@ -128,7 +128,7 @@ test('header checkbox is not necessarily checked when selectedRows.size > rows.l
/>
);
- expect(screen.getByLabelText('Select All')).not.toBeChecked();
+ expect(screen.getByRole('checkbox', { name: 'Select All' })).not.toBeChecked();
});
test('extra keys are preserved when updating the selectedRows Set', async () => {
@@ -156,7 +156,7 @@ test('extra keys are preserved when updating the selectedRows Set', async () =>
render();
- const headerCheckbox = screen.getByLabelText('Select All');
+ const headerCheckbox = screen.getByRole('checkbox', { name: 'Select All' });
await toggleSelection(1);
expect(set).toStrictEqual(new Set([...initialSet, 2]));
diff --git a/test/setup.ts b/test/setup.ts
index 3fabed7cef..16d7524ffa 100644
--- a/test/setup.ts
+++ b/test/setup.ts
@@ -1,4 +1,7 @@
import { act } from 'react-dom/test-utils';
+import { configure } from '@testing-library/react';
+
+configure({ throwSuggestions: true });
// Allow node-environment tests to properly fail when accessing DOM APIs,
// as @testing-library/jest-dom may polyfill some DOM APIs like `window.CSS`
diff --git a/test/sorting.test.tsx b/test/sorting.test.tsx
index e725ada35c..727484e984 100644
--- a/test/sorting.test.tsx
+++ b/test/sorting.test.tsx
@@ -35,8 +35,8 @@ function setup() {
}
function testSortColumns(expectedValue: readonly SortColumn[]) {
- expect(JSON.parse(screen.getByTestId('sortColumnsValue').textContent!)).toStrictEqual(
- expectedValue
+ expect(screen.getByTestId('sortColumnsValue', { suggest: false })).toHaveTextContent(
+ JSON.stringify(expectedValue)
);
}