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

test/servers/CreateServer.test.tsx

@@ -1,7 +1,6 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { page } from 'vitest/browser';
 import { CreateServer } from '../../src/servers/CreateServer';
 import type { ServersMap } from '../../src/servers/data';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -17,7 +16,11 @@ describe('<CreateServer />', () => {
   const defaultServers: ServersMap = {
     foo: fromPartial({ url: 'https://existing_url.com', apiKey: 'existing_api_key', id: 'foo' }),
   };
-  const setUp = ({ serversImported = false, importFailed = false, servers = defaultServers }: SetUpOptions = {}) => {
+  const setUp = async ({
+    serversImported = false,
+    importFailed = false,
+    servers = defaultServers,
+  }: SetUpOptions = {}) => {
     let callCount = 0;
     const useTimeoutToggle = vi.fn().mockImplementation(() => {
       const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
@@ -28,21 +31,21 @@ describe('<CreateServer />', () => {
 
     return {
       history,
-      ...renderWithStore(
+      ...(await renderWithStore(
         <Router location={history.location} navigator={history}>
           <CreateServer useTimeoutToggle={useTimeoutToggle} />
         </Router>,
         {
           initialState: { servers },
         },
-      ),
+      )),
     };
   };
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('shows success message when imported is true', async () => {
-    setUp({ serversImported: true });
+    const page = await setUp({ serversImported: true });
 
     await expect
       .element(page.getByText('Servers properly imported. You can now select one from the list :)'))
@@ -54,7 +57,7 @@ describe('<CreateServer />', () => {
   });
 
   it('shows error message when import failed', async () => {
-    setUp({ importFailed: true });
+    const page = await setUp({ importFailed: true });
 
     await expect
       .element(page.getByText('Servers properly imported. You can now select one from the list :)'))
@@ -65,7 +68,7 @@ describe('<CreateServer />', () => {
   });
 
   it('creates server data when form is submitted', async () => {
-    const { user, history, store } = setUp();
+    const { user, history, store, ...page } = await setUp();
     const expectedServerId = 'the_name-the_url.com';
 
     await user.type(page.getByLabelText(/^Name/), 'the_name');
@@ -88,7 +91,7 @@ describe('<CreateServer />', () => {
   });
 
   it('displays dialog when trying to create a duplicated server', async () => {
-    const { user, history } = setUp();
+    const { user, history, ...page } = await setUp();
 
     await user.type(page.getByLabelText(/^Name/), 'the_name');
     await user.type(page.getByLabelText(/^URL/), 'https://existing_url.com');

test/servers/DeleteServerButton.test.tsx

@@ -2,15 +2,14 @@ import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import type { ReactNode } from 'react';
 import { Router } from 'react-router';
-import { page } from 'vitest/browser';
 import { DeleteServerButton } from '../../src/servers/DeleteServerButton';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithStore } from '../__helpers__/setUpTest';
 
 describe('<DeleteServerButton />', () => {
-  const setUp = (children: ReactNode = 'Remove this server') => {
+  const setUp = async (children: ReactNode = 'Remove this server') => {
     const history = createMemoryHistory({ initialEntries: ['/foo'] });
-    const result = renderWithStore(
+    const result = await renderWithStore(
       <Router location={history.location} navigator={history}>
         <DeleteServerButton server={fromPartial({})}>{children}</DeleteServerButton>
       </Router>,
@@ -22,14 +21,14 @@ describe('<DeleteServerButton />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp('Delete me')));
 
   it.each([['Foo bar'], ['baz'], ['something']])('renders expected content', async (children) => {
-    const { container } = setUp(children);
+    const { container } = await setUp(children);
 
     expect(container.firstChild).toBeTruthy();
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it('displays modal when button is clicked', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await expect.element(page.getByText(/Are you sure you want to remove/)).not.toBeInTheDocument();
     await user.click(page.getByText('Remove this server'));
@@ -37,7 +36,7 @@ describe('<DeleteServerButton />', () => {
   });
 
   it('navigates to home when deletion is confirmed', async () => {
-    const { user, history } = setUp();
+    const { user, history, ...page } = await setUp();
 
     // Open modal
     await user.click(page.getByText('Remove this server'));

test/servers/DeleteServerModal.test.tsx

@@ -1,5 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
-import { page } from 'vitest/browser';
+import type { RenderResult } from 'vitest-browser-react';
 import type { ServerWithId } from '../../src/servers/data';
 import { DeleteServerModal } from '../../src/servers/DeleteServerModal';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -19,35 +19,35 @@ describe('<DeleteServerModal />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders a modal window', async () => {
-    setUp();
+    const page = await setUp();
 
     await expect.element(page.getByRole('dialog')).toBeInTheDocument();
     await expect.element(page.getByRole('heading')).toHaveTextContent('Remove server');
   });
 
   it('displays the name of the server as part of the content', async () => {
-    setUp();
+    const page = await setUp();
 
     await expect.element(page.getByText(/^Are you sure you want to remove/)).toBeInTheDocument();
     await expect.element(page.getByText(serverName)).toBeInTheDocument();
   });
 
-  it.each([[() => page.getByRole('button', { name: 'Cancel' })], [() => page.getByLabelText('Close dialog')]])(
-    'closes dialog when clicking cancel button',
-    async (getButton) => {
-      const { user, store } = setUp();
+  it.each([
+    [(page: RenderResult) => page.getByRole('button', { name: 'Cancel' })],
+    [(page: RenderResult) => page.getByLabelText('Close dialog')],
+  ])('closes dialog when clicking cancel button', async (getButton) => {
+    const { user, store, ...page } = await setUp();
 
-      await expect.element(page.getByRole('dialog')).toBeInTheDocument();
-      await user.click(getButton());
-      await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
+    await expect.element(page.getByRole('dialog')).toBeInTheDocument();
+    await user.click(getButton(page));
+    await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
 
-      // No server has been deleted
-      expect(Object.keys(store.getState().servers)).toHaveLength(1);
-    },
-  );
+    // No server has been deleted
+    expect(Object.keys(store.getState().servers)).toHaveLength(1);
+  });
 
   it('deletes server when clicking accept button', async () => {
-    const { user, store } = setUp();
+    const { user, store, ...page } = await setUp();
 
     expect(Object.keys(store.getState().servers)).toHaveLength(1);
     await user.click(page.getByRole('button', { name: 'Delete' }));

test/servers/EditServer.test.tsx

@@ -1,7 +1,6 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
-import { page } from 'vitest/browser';
 import type { ReachableServer, SelectedServer } from '../../src/servers/data';
 import { isServerWithId } from '../../src/servers/data';
 import { EditServer } from '../../src/servers/EditServer';
@@ -15,11 +14,11 @@ describe('<EditServer />', () => {
     url: 'https://example.com',
     apiKey: 'the_api_key',
   });
-  const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => {
+  const setUp = async (selectedServer: SelectedServer = defaultSelectedServer) => {
     const history = createMemoryHistory({ initialEntries: ['/foo', '/bar'] });
     return {
       history,
-      ...renderWithStore(
+      ...(await renderWithStore(
         <Router location={history.location} navigator={history}>
           <EditServer />
         </Router>,
@@ -29,27 +28,27 @@ describe('<EditServer />', () => {
             servers: isServerWithId(selectedServer) ? { [selectedServer.id]: selectedServer } : {},
           },
         },
-      ),
+      )),
     };
   };
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders nothing if selected server is not reachable', async () => {
-    setUp(fromPartial<SelectedServer>({}));
+    const page = await setUp(fromPartial<SelectedServer>({}));
 
     await expect.element(page.getByText('Edit')).not.toBeInTheDocument();
     await expect.element(page.getByText('Cancel')).not.toBeInTheDocument();
     await expect.element(page.getByText('Save')).not.toBeInTheDocument();
   });
 
-  it('renders server title', () => {
-    setUp();
+  it('renders server title', async () => {
+    const page = await setUp();
     expect(page.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
   });
 
   it('display the server info in the form components', async () => {
-    setUp();
+    const page = await setUp();
 
     await expect.element(page.getByLabelText(/^Name/)).toBeInTheDocument();
     await expect.element(page.getByLabelText(/^URL/)).toBeInTheDocument();
@@ -57,7 +56,7 @@ describe('<EditServer />', () => {
   });
 
   it('edits server and redirects to it when form is submitted', async () => {
-    const { user, history, store } = setUp();
+    const { user, history, store, ...page } = await setUp();
 
     await user.type(page.getByLabelText(/^Name/), ' edited');
     await user.click(page.getByRole('button', { name: 'Save' }));
@@ -75,7 +74,7 @@ describe('<EditServer />', () => {
   it.each([{ forwardCredentials: true }, { forwardCredentials: false }])(
     'edits advanced options - forward credentials',
     async ({ forwardCredentials }) => {
-      const { user, store } = setUp({ ...defaultSelectedServer, forwardCredentials });
+      const { user, store, ...page } = await setUp({ ...defaultSelectedServer, forwardCredentials });
 
       await user.click(page.getByText('Advanced options'));
       await user.click(page.getByLabelText('Forward credentials to this server on every request.'));

test/servers/ManageServers.test.tsx

@@ -1,6 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
 import type { ServersMap, ServerWithId } from '../../src/servers/data';
 import { ManageServers } from '../../src/servers/ManageServers';
 import type { ServersExporter } from '../../src/servers/services/ServersExporter';
@@ -33,7 +32,7 @@ describe('<ManageServers />', () => {
     ));
 
   it('shows search field which allows searching servers, affecting te amount of rendered rows', async () => {
-    const { user } = setUp({
+    const { user, ...page } = await setUp({
       foo: createServerMock('foo'),
       bar: createServerMock('bar'),
       baz: createServerMock('baz'),
@@ -64,7 +63,7 @@ describe('<ManageServers />', () => {
   it.each([[createServerMock('foo')], [createServerMock('foo', true)]])(
     'shows different amount of columns if there are at least one auto-connect server',
     async (server) => {
-      setUp({ server });
+      const page = await setUp({ server });
 
       if (server.autoConnect) {
         await expect.element(page.getByTestId('auto-connect')).toBeInTheDocument();
@@ -77,13 +76,13 @@ describe('<ManageServers />', () => {
   it.each([
     [{}, 0],
     [{ foo: createServerMock('foo') }, 1],
-  ])('shows export button if the list of servers is not empty', (servers, expectedButtons) => {
-    setUp(servers);
+  ])('shows export button if the list of servers is not empty', async (servers, expectedButtons) => {
+    const page = await setUp(servers);
     expect(page.getByRole('button', { name: 'Export servers' }).elements()).toHaveLength(expectedButtons);
   });
 
   it('allows exporting servers when clicking on button', async () => {
-    const { user } = setUp({ foo: createServerMock('foo') });
+    const { user, ...page } = await setUp({ foo: createServerMock('foo') });
 
     expect(exportServers).not.toHaveBeenCalled();
     await user.click(page.getByRole('button', { name: 'Export servers' }));
@@ -93,7 +92,7 @@ describe('<ManageServers />', () => {
   it.each([[true], [false]])('shows an error message if an error occurs while importing servers', async (hasError) => {
     useTimeoutToggle.mockReturnValue([hasError, vi.fn()]);
 
-    setUp({ foo: createServerMock('foo') });
+    const page = await setUp({ foo: createServerMock('foo') });
 
     if (hasError) {
       await expect

test/servers/ManageServersRow.test.tsx

@@ -1,6 +1,5 @@
 import { Table } from '@shlinkio/shlink-frontend-kit';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRow } from '../../src/servers/ManageServersRow';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -27,24 +26,23 @@ describe('<ManageServersRow />', () => {
   it.each([
     [true, 4],
     [false, 3],
-  ])('renders expected amount of columns', (hasAutoConnect, expectedCols) => {
-    setUp(hasAutoConnect);
+  ])('renders expected amount of columns', async (hasAutoConnect, expectedCols) => {
+    const page = await setUp(hasAutoConnect);
     expect(page.getByRole('cell').elements()).toHaveLength(expectedCols);
   });
 
   it('renders an options dropdown', async () => {
-    setUp();
+    const page = await setUp();
     await expect.element(page.getByRole('button', { name: 'Options' })).toBeInTheDocument();
   });
 
-  it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', (autoConnect) => {
-    const { container } = setUp(true, autoConnect);
+  it.each([[true], [false]])('renders auto-connect icon only if server is autoConnect', async (autoConnect) => {
+    const { container } = await setUp(true, autoConnect);
     expect(container).toMatchSnapshot();
   });
 
   it('renders server props where appropriate', async () => {
-    setUp();
-
+    const page = await setUp();
     const link = page.getByRole('link');
 
     await expect.element(link).toHaveAttribute('href', `/server/${server.id}`);

test/servers/ManageServersRowDropdown.test.tsx

@@ -1,6 +1,6 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
+import type { RenderResult } from 'vitest-browser-react';
 import type { UserEvent } from 'vitest/browser';
 import type { ServerWithId } from '../../src/servers/data';
 import { ManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
@@ -21,21 +21,21 @@ describe('<ManageServersRowDropdown />', () => {
       },
     );
   };
-  const toggleDropdown = (user: UserEvent) => user.click(page.getByRole('button'));
+  const toggleDropdown = (user: UserEvent, page: RenderResult) => user.click(page.getByRole('button'));
 
   it('passes a11y checks', async () => {
-    const { user, container } = setUp();
+    const { user, ...page } = await setUp();
     // Open menu
-    await toggleDropdown(user);
+    await toggleDropdown(user, page);
 
-    return checkAccessibility({ container });
+    return checkAccessibility(page);
   });
 
   it('renders expected amount of dropdown items', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await expect.element(page.getByRole('menu')).not.toBeInTheDocument();
-    await toggleDropdown(user);
+    await toggleDropdown(user, page);
     await expect.element(page.getByRole('menu')).toBeInTheDocument();
 
     expect(page.getByRole('menuitem').elements()).toHaveLength(4);
@@ -48,27 +48,27 @@ describe('<ManageServersRowDropdown />', () => {
   });
 
   it.each([true, false])('allows toggling auto-connect', async (autoConnect) => {
-    const { user, store } = setUp(autoConnect);
+    const { user, store, ...page } = await setUp(autoConnect);
 
-    await toggleDropdown(user);
+    await toggleDropdown(user, page);
     await user.click(page.getByRole('menuitem', { name: autoConnect ? 'Do not auto-connect' : 'Auto-connect' }));
 
     expect(Object.values(store.getState().servers)[0].autoConnect).toEqual(!autoConnect);
   });
 
   it('renders deletion modal', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     expect(page.getByRole('dialog')).not.toBeInTheDocument();
 
-    await toggleDropdown(user);
+    await toggleDropdown(user, page);
     await user.click(page.getByRole('menuitem', { name: 'Remove server' }));
 
     await expect.element(page.getByRole('dialog')).toBeInTheDocument();
   });
 
-  it.each([[true], [false]])('renders expected size and icon', (autoConnect) => {
-    const { container } = setUp(autoConnect);
+  it.each([[true], [false]])('renders expected size and icon', async (autoConnect) => {
+    const { container } = await setUp(autoConnect);
     expect(container).toMatchSnapshot();
   });
 });

test/servers/ServersDropdown.test.tsx

@@ -1,6 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
-import { page } from 'vitest/browser';
 import type { ServersMap } from '../../src/servers/data';
 import { ServersDropdown } from '../../src/servers/ServersDropdown';
 import { checkAccessibility } from '../__helpers__/accessibility';
@@ -25,15 +24,15 @@ describe('<ServersDropdown />', () => {
     );
 
   it('passes a11y checks', async () => {
-    const { user, ...rest } = setUp();
+    const { user, container, ...page } = await setUp();
     // Open menu
     await user.click(page.getByText('Servers'));
 
-    return checkAccessibility(rest);
+    return checkAccessibility({ container });
   });
 
   it('contains the list of servers and the "mange servers" button', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await user.click(page.getByText('Servers'));
     const items = page.getByRole('menuitem').elements();
@@ -47,12 +46,12 @@ describe('<ServersDropdown />', () => {
   });
 
   it('contains a toggle with proper text', async () => {
-    setUp();
+    const page = await setUp();
     await expect.element(page.getByRole('button')).toHaveTextContent('Servers');
   });
 
   it('contains a button to manage servers', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await user.click(page.getByText('Servers'));
     await expect
@@ -61,7 +60,7 @@ describe('<ServersDropdown />', () => {
   });
 
   it('shows only create link when no servers exist yet', async () => {
-    const { user } = setUp({});
+    const { user, ...page } = await setUp({});
 
     await user.click(page.getByText('Servers'));
     await expect.element(page.getByRole('menuitem', { name: 'Add a server' })).toBeInTheDocument();

test/servers/helpers/ImportServersBtn.test.tsx

@@ -1,5 +1,4 @@
 import { fromPartial } from '@total-typescript/shoehorn';
-import { page } from 'vitest/browser';
 import type { ServerData, ServersMap, ServerWithId } from '../../../src/servers/data';
 import type { ImportServersBtnProps } from '../../../src/servers/helpers/ImportServersBtn';
 import { ImportServersBtn } from '../../../src/servers/helpers/ImportServersBtn';
@@ -20,7 +19,7 @@ describe('<ImportServersBtn />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('shows tooltip on button hover', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await expect.element(page.getByText('You can create servers by importing a CSV file')).not.toBeInTheDocument();
     await user.hover(page.getByRole('button'));
@@ -32,7 +31,7 @@ describe('<ImportServersBtn />', () => {
     ['foo', 'foo'],
     ['bar', 'bar'],
   ])('allows a class name to be provided', async (providedClassName, expectedClassName) => {
-    setUp({ className: providedClassName });
+    const page = await setUp({ className: providedClassName });
     await expect.element(page.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
   });
 
@@ -41,12 +40,12 @@ describe('<ImportServersBtn />', () => {
     ['foo', 'foo'],
     ['bar', 'bar'],
   ])('has expected text', async (children, expectedText) => {
-    setUp({ children });
+    const page = await setUp({ children });
     await expect.element(page.getByRole('button')).toHaveTextContent(expectedText);
   });
 
   it('imports servers when file input changes', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     await user.upload(page.getByTestId('csv-file-input'), csvFile);
     expect(importServersFromFile).toHaveBeenCalledTimes(1);
@@ -68,7 +67,7 @@ describe('<ImportServersBtn />', () => {
         id: 'existingserver-s.test',
       };
       const newServer: ServerData = { name: 'newServer', url: 'http://s.test/newUrl', apiKey: 'newApiKey' };
-      const { user, store } = setUp({}, { [existingServer.id]: existingServer });
+      const { user, store, ...page } = await setUp({}, { [existingServer.id]: existingServer });
 
       importServersFromFile.mockResolvedValue([existingServerData, newServer]);
 

test/servers/helpers/ServerError.test.tsx

@@ -1,4 +1,3 @@
-import { screen } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { MemoryRouter } from 'react-router';
 import type { NonReachableServer, NotFoundServer, SelectedServer } from '../../../src/servers/data';
@@ -46,9 +45,9 @@ describe('<ServerError />', () => {
       },
     ],
   ])('renders expected information based on provided server type', async (selectedServer, { found, notFound }) => {
-    setUp(selectedServer);
+    const screen = await setUp(selectedServer);
 
     await Promise.all(found.map((text) => expect.element(screen.getByText(text)).toBeInTheDocument()));
-    await Promise.all(notFound.map((text) => expect.element(screen.queryByText(text)).not.toBeInTheDocument()));
+    await Promise.all(notFound.map((text) => expect.element(screen.getByText(text)).not.toBeInTheDocument()));
   });
 });