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,7 +1,7 @@
import { screen } from '@testing-library/react';
import { fromPartial } from '@total-typescript/shoehorn';
import type { PropsWithChildren, ReactNode } from 'react';
import { ErrorHandler as BaseErrorHandler } from '../../src/common/ErrorHandler';
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';
@@ -13,8 +13,12 @@ describe('<ErrorHandler />', () => {
const reload = vi.fn();
const location = fromPartial<Window['location']>({ reload });
const cons = fromPartial<Console>({ error: vi.fn() });
const ErrorHandler = (props: PropsWithChildren) => <BaseErrorHandler console={cons} location={location} {...props} />;
const setUp = (children: ReactNode = 'Error') => renderWithEvents(<ErrorHandler>{children}</ErrorHandler>);
const setUp = (children: ReactNode = 'Error') =>
renderWithEvents(
<ErrorHandler console={cons} location={location}>
{children}
</ErrorHandler>,
);
beforeEach(() => {
vi.spyOn(console, 'error').mockImplementation(() => {}); // Silence react errors
@@ -22,26 +26,26 @@ describe('<ErrorHandler />', () => {
it('passes a11y checks', () => checkAccessibility(setUp()));
it('renders children when no error has occurred', () => {
it('renders children when no error has occurred', async () => {
setUp(<span>Foo</span>);
expect(screen.getByText('Foo')).toBeInTheDocument();
expect(screen.queryByText('Oops! This is awkward :S')).not.toBeInTheDocument();
expect(screen.queryByRole('button')).not.toBeInTheDocument();
await expect.element(page.getByText('Foo')).toBeInTheDocument();
await expect.element(page.getByText('Oops! This is awkward :S')).not.toBeInTheDocument();
await expect.element(page.getByRole('button')).not.toBeInTheDocument();
});
it('renders error page when error has occurred', () => {
it('renders error page when error has occurred', async () => {
setUp(<ComponentWithError />);
expect(screen.getByText('Oops! This is awkward :S')).toBeInTheDocument();
expect(screen.getByRole('button')).toBeInTheDocument();
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 />);
expect(reload).not.toHaveBeenCalled();
await user.click(screen.getByRole('button'));
await user.click(page.getByRole('button'));
expect(reload).toHaveBeenCalled();
});
});