Fix failing tests that use findByRole

.eslintrc

@@ -95,6 +95,7 @@
       {
         "allowTestingFrameworkSetupHook": "beforeEach"
       }
-    ]
+    ],
+    "testing-library/prefer-find-by": "off"
   }
 }

__tests__/integration/mirador/tests/annotations.test.js

@@ -1,5 +1,5 @@
 import { expect, it } from 'vitest';
-import { screen, fireEvent, within } from '@testing-library/react';
+import { screen, fireEvent } from '@testing-library/react';
 import { setupIntegrationTestViewer } from '@tests/utils/test-utils';
 import config from '../mirador-configs/single-van-gogh';
 
@@ -13,7 +13,7 @@
   setupIntegrationTestViewer(config);
 
   it('Loads the manifest', async () => {
-    const element = await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i });
+    const element = await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i);
     expect(element).toBeInTheDocument();
   });
 
@@ -40,17 +40,25 @@
     const annotationButtons = await screen.findAllByLabelText(/annotations/i);
     fireEvent.click(annotationButtons[0]);
 
     expect(await screen.findByRole('heading', { name: 'Annotations' })).toBeInTheDocument();
 
     // Re. this regex: be sure that the number of annotations starts with a non zero digit
     const annoCountSubtitle = await screen.findByText(/Showing [1-9]\d* annotations/);
     expect(annoCountSubtitle).toBeInTheDocument();
-    const annotationCount = annoCountSubtitle.innerText.match(/\d+/)[0];
+    const annotationCount = annoCountSubtitle.textContent.match(/\d+/)[0];
 
-    const annotationPanel = await screen.findByRole('complementary', { name: /annotations/i });
-    expect(annotationPanel).toBeInTheDocument();
+    // NOTE: findByRole was causing mysterious failures so we are using querySelector
+    // for the rest of this test.
+    /* eslint-disable testing-library/no-node-access */
+    const annotationPanel = annoCountSubtitle.closest('aside');
+    const menu = annotationPanel.querySelector('[role="menu"]');
 
-    const listItems = await within(annotationPanel).findAllByRole('menuitem');
-    expect(listItems).toHaveLength(annotationCount);
+    // Find all menu items
+    const listItems = menu.querySelectorAll('[role="menuitem"]');
+    /* eslint-enable testing-library/no-node-access */
+
+    // Convert annotationCount (likely a string) to number
+    const expectedCount = Number(annotationCount);
+    expect(listItems.length).toBe(expectedCount);
   });
 });

__tests__/integration/mirador/tests/minimalist.test.js

@@ -7,9 +7,9 @@
   setupIntegrationTestViewer(config);
 
   it('Loads a manifest and displays it without some of the default controls', async () => {
-    expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument();
+    expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument();
 
     const infoButton = await screen.findByRole('tab', { name: /Information/i });
     expect(infoButton).toBeInTheDocument();
     const rightsButton = await screen.findByRole('tab', { name: /Rights/i });
     expect(rightsButton).toBeInTheDocument();

__tests__/integration/mirador/tests/thumbnail-navigation.test.js

@@ -10,7 +10,8 @@ describe('Canvas navigation by clicking thumbnails', () => {
   /* eslint-disable */
   it.skip('navigates a manifest using thumbnail navigation', async (context) => {
     // Make sure we have the manifest
-    const windowElement = await screen.findByRole('region', { name: /Window: Bodleian Library MS. Ind. Inst. Misc. 22/i });
+    const windowElement = await screen.findByLabelText(/Window: Bodleian Library MS. Ind. Inst. Misc. 22/i);
+
     expect(windowElement).toBeInTheDocument();
 
     const windowId = windowElement.getAttribute('id');

__tests__/integration/mirador/tests/viewer-config.test.js

@@ -8,7 +8,7 @@ describe('initialViewerConfig', () => {
 
   describe('initialViewerConfig', () => {
     it('allows initialViewerConfig to be passed', async (context) => {
-      expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument();
+      expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument();
 
       let viewerObject;
       await waitFor(() => {

__tests__/integration/mirador/tests/window-actions.test.js

@@ -7,8 +7,8 @@
   setupIntegrationTestViewer(config);
 
   it('Closes a Mirador window', async () => {
-    expect(await screen.findByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).toBeInTheDocument();
+    expect(await screen.findByLabelText(/Window: Self-Portrait Dedicated to Paul Gauguin/i)).toBeInTheDocument();
     const closeButton = screen.getByRole('button', { name: /Close window/i });
     fireEvent.click(closeButton);
     await waitFor(() => expect(screen.queryByRole('region', { name: /Window: Self-Portrait Dedicated to Paul Gauguin/i })).not.toBeInTheDocument());
 

__tests__/utils/test-utils.js

@@ -65,7 +65,7 @@ const setupMiradorViewer = async (config, plugins) => {
 
   render(
     <div
-      data-testid="mirador"
+      data-testid="test-mirador"
       style={{
         bottom: 0, left: 0, position: 'absolute', right: 0, top: 0,
       }}
@@ -85,11 +85,7 @@ export const setupIntegrationTestViewer = (config, plugins) => {
     context.miradorInstance = miradorInstance;
 
     // Wait for the viewer to render
-    expect(await screen.findByTestId('mirador')).toBeInTheDocument();
+    expect(await screen.findByTestId('test-mirador')).toBeInTheDocument();
     expect(await screen.findByLabelText('Workspace')).toBeInTheDocument();
-
-    if ((config.windows || []).length > 0) {
-      await screen.findAllByRole('region', { name: /Window:/i });
-    }
   });
 };

package.json

@@ -25,7 +25,7 @@
     "lint:translations": "node ./scripts/i18n-lint.js",
     "size": "bundlewatch --config bundlewatch.config.json",
     "start": "vite",
-    "test": "npm run build && npm run lint && npm run size && vitest run"
+    "test": "npm run build && npm run lint && npm run size && DEBUG_PRINT_LIMIT=70000 vitest run"
   },
   "license": "Apache-2.0",
   "contributors": [
@@ -85,7 +85,7 @@
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^7.x",
     "@mui/system": "^7.x",
-    "@testing-library/dom": "^10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.4.3",
@@ -104,7 +104,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "glob": "^10.3.0",
-    "happy-dom": "^17.0",
+    "happy-dom": "^18.0.1",
     "react": "^19.0.0",
     "react-dnd-test-backend": "^16.0.1",
     "react-dom": "^19.0.0",

src/components/Window.jsx

@@ -103,6 +103,7 @@ export function Window({
         id={windowId}
         className={ns('window')}
         aria-label={t('window', { label })}
+        data-testid="test-region"
       >
         <WindowTopBar
           component={workspaceType === 'mosaic' && windowDraggable ? DraggableNavBar : undefined}