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

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();