Replace rendering with store with react testing library by vitest-browser-react

test/common/Home.test.tsx

@@ -1,6 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
 import { Home } from '../../src/common/Home';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -21,7 +20,7 @@ describe('<Home />', () => {
     checkAccessibility(setUp({ '1a': fromPartial<ServerWithId>({ name: 'foo', id: '1' }) })));
 
   it('renders title', async () => {
-    setUp();
+    const page = await setUp();
     await expect.element(page.getByRole('heading', { name: 'Welcome!' })).toBeInTheDocument();
   });
 
@@ -36,7 +35,7 @@ describe('<Home />', () => {
     ],
     [{}, 2],
   ])('shows link to create or set-up server only when no servers exist', async (servers, expectedServers) => {
-    setUp(servers);
+    const page = await setUp(servers);
     const links = page.getByRole('link').elements();
 
     expect(links).toHaveLength(expectedServers);

test/common/MainHeader.test.tsx

@@ -1,6 +1,5 @@
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { page } from 'vitest/browser';
 import { MainHeader } from '../../src/common/MainHeader';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
@@ -20,7 +19,7 @@ describe('<MainHeader />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders ServersDropdown', async () => {
-    setUp();
+    const page = await setUp();
     await expect.element(page.getByRole('button', { name: 'Servers' })).toBeInTheDocument();
   });
 
@@ -31,7 +30,7 @@ describe('<MainHeader />', () => {
     ['/settings/foo', true],
     ['/settings/bar', true],
   ])('sets link to settings as active only when current path is settings', async (currentPath, isActive) => {
-    setUp(currentPath);
+    const page = await setUp(currentPath);
     await expect
       .element(page.getByRole('menuitem', { name: /Settings$/ }))
       .toHaveAttribute('data-active', isActive ? 'true' : 'false');

test/common/ShlinkVersionsContainer.test.tsx

@@ -21,7 +21,7 @@ describe('<ShlinkVersionsContainer />', () => {
     [fromPartial<SelectedServer>({}), false],
     [fromPartial<ReachableServer>({ version: '1.0.0' }), true],
   ])('renders proper col classes based on sidebar status', async (selectedServer, shouldAddMargin) => {
-    const { container } = setUp(selectedServer);
+    const { container } = await setUp(selectedServer);
 
     if (shouldAddMargin) {
       await expect.element(container.firstChild as HTMLElement).toHaveClass('md:ml-(--aside-menu-width)');

test/common/ShlinkWebComponentContainer.test.tsx

@@ -1,6 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
 import { ShlinkWebComponentContainer } from '../../src/common/ShlinkWebComponentContainer';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -26,7 +25,7 @@ describe('<ShlinkWebComponentContainer />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp(fromPartial({ version: '3.0.0' }))));
 
   it('shows loading indicator while loading server', async () => {
-    setUp(null);
+    const page = await setUp(null);
 
     await expect.element(page.getByText('Loading...')).toBeInTheDocument();
     await expect.element(page.getByText('ShlinkWebComponent')).not.toBeInTheDocument();
@@ -39,7 +38,7 @@ describe('<ShlinkWebComponentContainer />', () => {
       /Could not connect to this Shlink server/,
     ],
   ])('shows error for non reachable servers', async (selectedServer, expectedError) => {
-    setUp(selectedServer);
+    const page = await setUp(selectedServer);
 
     await expect.element(page.getByText('Loading...')).not.toBeInTheDocument();
     await expect.element(page.getByText(expectedError)).toBeInTheDocument();
@@ -47,7 +46,7 @@ describe('<ShlinkWebComponentContainer />', () => {
   });
 
   it('renders ShlinkWebComponent for reachable servers', async () => {
-    setUp(fromPartial({ version: '3.0.0' }));
+    const page = await setUp(fromPartial({ version: '3.0.0' }));
 
     await expect.element(page.getByText('Loading...')).not.toBeInTheDocument();
     await expect.element(page.getByText('ShlinkWebComponent')).toBeInTheDocument();