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

src/servers/helpers/ServerForm.tsx

@@ -28,7 +28,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   const handleSubmit = usePreventDefault(() => onSubmit({ name, url, apiKey, forwardCredentials }));
 
   return (
-    <form name="serverForm" onSubmit={handleSubmit} data-testid="server-form">
+    <form name="serverForm" onSubmit={handleSubmit}>
       <SimpleCard className="mb-4" bodyClassName="flex flex-col gap-y-3" title={title}>
         <LabelledInput label="Name" value={name} onChange={(e) => setName(e.target.value)} required />
         <LabelledInput label="URL" type="url" value={url} onChange={(e) => setUrl(e.target.value)} required />

test/__helpers__/setUpTest.tsx

@@ -4,6 +4,7 @@ import { render as testingLibRender } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { PropsWithChildren, ReactElement } from 'react';
 import { Provider } from 'react-redux';
+import type { RenderOptions as VitestRenderOptions } from 'vitest-browser-react';
 import { render as vitestRender } from 'vitest-browser-react';
 import { userEvent } from 'vitest/browser';
 import { ContainerProvider } from '../../src/container/context';
@@ -12,9 +13,9 @@ import { setUpStore } from '../../src/store';
 
 export const render = vitestRender;
 
-export const renderWithEvents = (element: ReactElement, options?: RenderOptions) => ({
+export const renderWithEvents = async (element: ReactElement, options?: VitestRenderOptions) => ({
   user: userEvent.setup(),
-  ...testingLibRender(element, options),
+  ...(await render(element, options)),
 });
 
 export type RenderOptionsWithState = Omit<RenderOptions, 'wrapper'> & {
@@ -48,6 +49,7 @@ export const renderWithStore = (
 
   return {
     store,
-    ...renderWithEvents(element, { ...options, wrapper: Wrapper }),
+    user: userEvent.setup(),
+    ...testingLibRender(element, { ...options, wrapper: Wrapper }),
   };
 };

test/common/AppUpdateBanner.test.tsx

@@ -1,4 +1,3 @@
-import { page } from 'vitest/browser';
 import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
@@ -11,7 +10,7 @@ describe('<AppUpdateBanner />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders initial state', async () => {
-    setUp();
+    const page = await setUp();
 
     await expect.element(page.getByRole('heading')).toHaveTextContent('This app has just been updated!');
     await expect.element(page.getByText('Restarting...')).not.toBeInTheDocument();
@@ -19,7 +18,7 @@ describe('<AppUpdateBanner />', () => {
   });
 
   it('invokes toggle when alert is closed', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     expect(onClose).not.toHaveBeenCalled();
     await user.click(page.getByLabelText('Close'));
@@ -27,7 +26,7 @@ describe('<AppUpdateBanner />', () => {
   });
 
   it('triggers the update when clicking the button', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     expect(forceUpdate).not.toHaveBeenCalled();
     await user.click(page.getByText(/^Restart now/));

test/common/ErrorHandler.test.tsx

@@ -1,6 +1,5 @@
 import { fromPartial } from '@total-typescript/shoehorn';
 import type { ReactNode } from 'react';
-import { page } from 'vitest/browser';
 import { ErrorHandler } from '../../src/common/ErrorHandler';
 import { checkAccessibility } from '../__helpers__/accessibility';
 import { renderWithEvents } from '../__helpers__/setUpTest';
@@ -27,7 +26,7 @@ describe('<ErrorHandler />', () => {
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders children when no error has occurred', async () => {
-    setUp(<span>Foo</span>);
+    const page = await setUp(<span>Foo</span>);
 
     await expect.element(page.getByText('Foo')).toBeInTheDocument();
     await expect.element(page.getByText('Oops! This is awkward :S')).not.toBeInTheDocument();
@@ -35,14 +34,14 @@ describe('<ErrorHandler />', () => {
   });
 
   it('renders error page when error has occurred', async () => {
-    setUp(<ComponentWithError />);
+    const page = await setUp(<ComponentWithError />);
 
     await expect.element(page.getByText('Oops! This is awkward :S')).toBeInTheDocument();
     await expect.element(page.getByRole('button')).toBeInTheDocument();
   });
 
   it('reloads page on button click', async () => {
-    const { user } = setUp(<ComponentWithError />);
+    const { user, ...page } = await setUp(<ComponentWithError />);
 
     expect(reload).not.toHaveBeenCalled();
     await user.click(page.getByRole('button'));

test/servers/CreateServer.test.tsx

@@ -1,4 +1,3 @@
-import { fireEvent } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
@@ -74,7 +73,7 @@ describe('<CreateServer />', () => {
     await user.type(page.getByLabelText(/^API key/), 'the_api_key');
 
     expect(store.getState().servers[expectedServerId]).not.toBeDefined();
-    fireEvent.submit(page.getByTestId('server-form').element());
+    await user.click(page.getByRole('button', { name: 'Create server' }));
     expect(store.getState().servers[expectedServerId]).toEqual(
       expect.objectContaining({
         id: expectedServerId,
@@ -95,7 +94,7 @@ describe('<CreateServer />', () => {
     await user.type(page.getByLabelText(/^URL/), 'https://existing_url.com');
     await user.type(page.getByLabelText(/^API key/), 'existing_api_key');
 
-    fireEvent.submit(page.getByTestId('server-form').element());
+    await user.click(page.getByRole('button', { name: 'Create server' }));
 
     await expect.element(page.getByRole('dialog')).toBeInTheDocument();
     await user.click(page.getByRole('button', { name: 'Discard' }));

test/servers/EditServer.test.tsx

@@ -1,4 +1,3 @@
-import { fireEvent } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
 import { createMemoryHistory } from 'history';
 import { Router } from 'react-router';
@@ -13,7 +12,7 @@ describe('<EditServer />', () => {
   const defaultSelectedServer = fromPartial<ReachableServer>({
     id: 'abc123',
     name: 'the_name',
-    url: 'the_url',
+    url: 'https://example.com',
     apiKey: 'the_api_key',
   });
   const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => {
@@ -61,15 +60,11 @@ describe('<EditServer />', () => {
     const { user, history, store } = setUp();
 
     await user.type(page.getByLabelText(/^Name/), ' edited');
-    await user.type(page.getByLabelText(/^URL/), ' edited');
+    await user.click(page.getByRole('button', { name: 'Save' }));
-    // TODO Using fire event because userEvent.click on the Submit button does not submit the form
-    // await user.click(screen.getByRole('button', { name: 'Save' }));
-    fireEvent.submit(page.getByTestId('server-form').element());
 
     expect(store.getState().servers[defaultSelectedServer.id]).toEqual(
       expect.objectContaining({
         name: 'the_name edited',
-        url: 'the_url edited',
       }),
     );
 
@@ -84,7 +79,7 @@ describe('<EditServer />', () => {
 
       await user.click(page.getByText('Advanced options'));
       await user.click(page.getByLabelText('Forward credentials to this server on every request.'));
-      fireEvent.submit(page.getByTestId('server-form').element());
+      await user.click(page.getByRole('button', { name: 'Save' }));
 
       expect(store.getState().servers[defaultSelectedServer.id]).toEqual(
         expect.objectContaining({

test/servers/helpers/DuplicatedServersModal.test.tsx

@@ -1,5 +1,4 @@
 import { fromPartial } from '@total-typescript/shoehorn';
-import { page } from 'vitest/browser';
 import type { ServerData } from '../../../src/servers/data';
 import { DuplicatedServersModal } from '../../../src/servers/helpers/DuplicatedServersModal';
 import { checkAccessibility } from '../../__helpers__/accessibility';
@@ -22,8 +21,8 @@ describe('<DuplicatedServersModal />', () => {
     [[mockServer(), mockServer()], 2],
     [[mockServer(), mockServer(), mockServer()], 3],
     [[mockServer(), mockServer(), mockServer(), mockServer()], 4],
-  ])('renders expected amount of items', (duplicatedServers, expectedItems) => {
+  ])('renders expected amount of items', async (duplicatedServers, expectedItems) => {
-    setUp(duplicatedServers);
+    const page = await setUp(duplicatedServers);
     expect(page.getByRole('listitem')).toHaveLength(expectedItems);
   });
 
@@ -49,7 +48,7 @@ describe('<DuplicatedServersModal />', () => {
       },
     ],
   ])('renders expected texts based on amount of servers', async (duplicatedServers, assertions) => {
-    setUp(duplicatedServers);
+    const page = await setUp(duplicatedServers);
 
     await expect.element(page.getByRole('heading')).toHaveTextContent(assertions.header);
     await expect.element(page.getByText(assertions.firstParagraph)).toBeInTheDocument();
@@ -63,7 +62,7 @@ describe('<DuplicatedServersModal />', () => {
     [[mockServer({ url: 'url', apiKey: 'apiKey' })]],
     [[mockServer({ url: 'url_1', apiKey: 'apiKey_1' }), mockServer({ url: 'url_2', apiKey: 'apiKey_2' })]],
   ])('displays provided server data', async (duplicatedServers) => {
-    setUp(duplicatedServers);
+    const page = await setUp(duplicatedServers);
 
     if (duplicatedServers.length === 0) {
       await expect.element(page.getByRole('listitem')).not.toBeInTheDocument();
@@ -87,7 +86,7 @@ describe('<DuplicatedServersModal />', () => {
   });
 
   it('invokes onClose when appropriate button is clicked', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     expect(onClose).not.toHaveBeenCalled();
     await user.click(page.getByRole('button', { name: 'Discard' }));
@@ -95,7 +94,7 @@ describe('<DuplicatedServersModal />', () => {
   });
 
   it('invokes onConfirm when appropriate button is clicked', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
 
     expect(onConfirm).not.toHaveBeenCalled();
     await user.click(page.getByRole('button', { name: 'Save duplicate' }));

test/servers/helpers/ServerForm.test.tsx

@@ -1,17 +1,21 @@
-import { fireEvent } from '@testing-library/react';
-import { page } from 'vitest/browser';
 import { ServerForm } from '../../../src/servers/helpers/ServerForm';
 import { checkAccessibility } from '../../__helpers__/accessibility';
 import { renderWithEvents } from '../../__helpers__/setUpTest';
 
 describe('<ServerForm />', () => {
   const onSubmit = vi.fn();
-  const setUp = () => renderWithEvents(<ServerForm onSubmit={onSubmit}>Something</ServerForm>);
+  const setUp = () =>
+    renderWithEvents(
+      <ServerForm onSubmit={onSubmit}>
+        <span>Something</span>
+        <button type="submit">Submit</button>
+      </ServerForm>,
+    );
 
   it('passes a11y checks', () => checkAccessibility(setUp()));
 
   it('renders inputs', async () => {
-    setUp();
+    const page = await setUp();
 
     await expect.element(page.getByLabelText(/^Name/)).toBeInTheDocument();
     await expect.element(page.getByLabelText(/^URL/)).toBeInTheDocument();
@@ -21,15 +25,22 @@ describe('<ServerForm />', () => {
   });
 
   it('invokes submit callback when submit event is triggered', async () => {
-    setUp();
+    const { user, ...page } = await setUp();
 
     expect(onSubmit).not.toHaveBeenCalled();
-    fireEvent.submit(page.getByTestId('server-form').element(), { preventDefault: vi.fn() });
+
+    // Fill required elements so the form can be submitted
+    await user.type(page.getByLabelText(/^Name/), 'The server');
+    await user.type(page.getByLabelText(/^URL/), 'https://example.com');
+    await user.type(page.getByLabelText(/^API key/), '123456');
+
+    await user.click(page.getByRole('button', { name: 'Submit' }));
+
     expect(onSubmit).toHaveBeenCalled();
   });
 
   it('shows advanced options', async () => {
-    const { user } = setUp();
+    const { user, ...page } = await setUp();
     const forwardCredentialsLabel = 'Forward credentials to this server on every request.';
 
     await expect.element(page.getByLabelText(forwardCredentialsLabel)).not.toBeInTheDocument();