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

test/common/NotFound.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { NotFound } from '../../src/common/NotFound';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { render } from '../__helpers__/setUpTest';
 
 describe('<NotFound />', () => {
   const setUp = (props = {}) =>
@@ -14,15 +14,15 @@ describe('<NotFound />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('shows expected error title', async () => {
-    setUp();
-    await expect.element(screen.getByText('Oops! We could not find requested route.')).toBeInTheDocument();
+    const page = await setUp();
+    await expect.element(page.getByText('Oops! We could not find requested route.')).toBeInTheDocument();
   });
 
   it('shows expected error message', async () => {
-    setUp();
+    const page = await setUp();
     await expect
       .element(
-        screen.getByText(
+        page.getByText(
           "Use your browser's back button to navigate to the page you have previously come from, or just press this button.",
         ),
       )
@@ -34,8 +34,8 @@ describe('<NotFound />', () => {
     [{ to: '/foo/bar', children: 'Hello' }, '/foo/bar', 'Hello'],
     [{ to: '/baz-bar', children: <>Foo</> }, '/baz-bar', 'Foo'],
   ])('shows expected link and text', async (props, expectedLink, expectedText) => {
-    setUp(props);
-    const link = screen.getByRole('link');
+    const page = await setUp(props);
+    const link = page.getByRole('link');
 
     await expect.element(link).toHaveAttribute('href', expectedLink);
     await expect.element(link).toHaveTextContent(expectedText);

test/common/ScrollToTop.test.tsx

@@ -1,7 +1,7 @@
-import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router';
 import { ScrollToTop } from '../../src/common/ScrollToTop';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { render } from '../__helpers__/setUpTest.tsx';
 
 describe('<ScrollToTop />', () => {
   const setUp = (children = 'Foo') =>
@@ -14,7 +14,7 @@ describe('<ScrollToTop />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it.each([['Foobar'], ['Barfoo'], ['Something']])('just renders children', async (children) => {
-    setUp(children);
+    const screen = await setUp(children);
     await expect.element(screen.getByText(children)).toBeInTheDocument();
   });
 });

test/common/ShlinkVersions.test.tsx

@@ -1,9 +1,9 @@
-import { render, screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';
 import { ShlinkVersions } from '../../src/common/ShlinkVersions';
 import type { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
+import { render } from '../__helpers__/setUpTest.tsx';
 
 describe('<ShlinkVersions />', () => {
   const setUp = (props: ShlinkVersionsProps) => render(<ShlinkVersions {...props} />);
@@ -20,8 +20,8 @@ describe('<ShlinkVersions />', () => {
   ])(
     'displays expected versions when selected server is reachable',
     async (clientVersion, selectedServer, expectedClientVersion, expectedServerVersion) => {
-      setUp({ clientVersion, selectedServer });
-      const [serverLink, clientLink] = screen.getAllByRole('link');
+      const screen = await setUp({ clientVersion, selectedServer });
+      const [serverLink, clientLink] = screen.getByRole('link').all();
 
       await expect
         .element(serverLink)
@@ -39,8 +39,8 @@ describe('<ShlinkVersions />', () => {
     ['1.2.3', fromPartial<NotFoundServer>({ serverNotFound: true })],
     ['1.2.3', fromPartial<NonReachableServer>({ serverNotReachable: true })],
   ])('displays only client version when selected server is not reachable', async (clientVersion, selectedServer) => {
-    setUp({ clientVersion, selectedServer });
-    const links = screen.getAllByRole('link');
+    const screen = await setUp({ clientVersion, selectedServer });
+    const links = screen.getByRole('link').all();
 
     expect(links).toHaveLength(1);
     await expect

test/common/img/ShlinkLogo.test.tsx

@@ -1,8 +1,8 @@
 import { brandColor } from '@shlinkio/shlink-frontend-kit';
-import { render } from '@testing-library/react';
 import type { ShlinkLogoProps } from '../../../src/common/img/ShlinkLogo';
 import { ShlinkLogo } from '../../../src/common/img/ShlinkLogo';
 import { checkAccessibility } from '../../__helpers__/accessibility';
+import { render } from '../../__helpers__/setUpTest.tsx';
 
 describe('<ShlinkLogo />', () => {
   const setUp = (props: ShlinkLogoProps = {}) => render(<ShlinkLogo {...props} />);
@@ -14,7 +14,7 @@ describe('<ShlinkLogo />', () => {
     ['red', 'red'],
     ['white', 'white'],
   ])('renders expected color', async (color, expectedColor) => {
-    const { container } = setUp({ color });
+    const { container } = await setUp({ color });
     await expect.element(container.querySelector('g')).toHaveAttribute('fill', expectedColor);
   });
 
@@ -23,7 +23,7 @@ describe('<ShlinkLogo />', () => {
     ['foo', 'foo'],
     ['bar', 'bar'],
   ])('renders expected class', async (className, expectedClassName) => {
-    const { container } = setUp({ className });
+    const { container } = await setUp({ className });
 
     if (expectedClassName) {
       await expect.element(container.firstChild as HTMLElement).toHaveAttribute('class', expectedClassName);