Replace @testing-library/jest-dom with built-in vitest browser assertions

This commit is contained in:
Alejandro Celaya
2026-08-16 19:32:41 +02:00
parent ba73644871
commit 585d7c6f63
30 changed files with 305 additions and 429 deletions

View File

@@ -1,5 +1,5 @@
import { screen, waitFor } from '@testing-library/react';
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';
@@ -22,35 +22,33 @@ describe('<ImportServersBtn />', () => {
it('shows tooltip on button hover', async () => {
const { user } = setUp();
expect(screen.queryByText(/^You can create servers by importing a CSV file/)).not.toBeInTheDocument();
await user.hover(screen.getByRole('button'));
await waitFor(() =>
expect(screen.getByText(/^You can create servers by importing a CSV file/)).toBeInTheDocument(),
);
await expect.element(page.getByText('You can create servers by importing a CSV file')).not.toBeInTheDocument();
await user.hover(page.getByRole('button'));
await expect.element(page.getByText('You can create servers by importing a CSV file')).toBeInTheDocument();
});
it.each([
[undefined, ''],
['foo', 'foo'],
['bar', 'bar'],
])('allows a class name to be provided', (providedClassName, expectedClassName) => {
])('allows a class name to be provided', async (providedClassName, expectedClassName) => {
setUp({ className: providedClassName });
expect(screen.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
await expect.element(page.getByRole('button')).toHaveAttribute('class', expect.stringContaining(expectedClassName));
});
it.each([
[undefined, 'Import from file'],
['foo', 'foo'],
['bar', 'bar'],
])('has expected text', (children, expectedText) => {
])('has expected text', async (children, expectedText) => {
setUp({ children });
expect(screen.getByRole('button')).toHaveTextContent(expectedText);
await expect.element(page.getByRole('button')).toHaveTextContent(expectedText);
});
it('imports servers when file input changes', async () => {
const { user } = setUp();
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
await user.upload(page.getByTestId('csv-file-input'), csvFile);
expect(importServersFromFile).toHaveBeenCalledTimes(1);
});
@@ -74,15 +72,15 @@ describe('<ImportServersBtn />', () => {
importServersFromFile.mockResolvedValue([existingServerData, newServer]);
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
await user.upload(screen.getByTestId('csv-file-input'), csvFile);
await expect.element(page.getByRole('dialog')).not.toBeInTheDocument();
await user.upload(page.getByTestId('csv-file-input'), csvFile);
// Once the file is uploaded, non-duplicated servers are immediately created
const { servers } = store.getState();
expect(Object.keys(servers)).toHaveLength(2);
expect(screen.getByRole('dialog')).toBeInTheDocument();
await user.click(screen.getByRole('button', { name: btnName }));
await expect.element(page.getByRole('dialog')).toBeInTheDocument();
await user.click(page.getByRole('button', { name: btnName }));
// If duplicated servers are saved, there's one extra server creation
if (savesDuplicatedServers) {