Skip to content

Migrate from RTL to vitest-browser-react #707

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wojtekmaj merged 14 commits into from
Oct 31, 2025
Merged

Migrate from RTL to vitest-browser-react #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
33d85d6
Make render function calls async
wojtekmaj Oct 31, 2025
d56568d
Swap render function
wojtekmaj Oct 31, 2025
06ed00a
Replace fireEvent.click with userEvent.click
wojtekmaj Oct 31, 2025
115e8df
Replace fireEvent.change with userEvent.fill
wojtekmaj Oct 31, 2025
c0d01ff
Use userEvent.clear() instead of userEvent.fill with empty value
wojtekmaj Oct 31, 2025
6be157b
Replace userEvent.key* with custom solution
wojtekmaj Oct 31, 2025
d246a6d
Remove useless Vitest setup
wojtekmaj Oct 31, 2025
a59ab90
Remove use of waitFor, waitForElementToBeRemoved
wojtekmaj Oct 31, 2025
0d8795a
Replace userEvent.touchStart with custom solution
wojtekmaj Oct 31, 2025
71c6cb8
Replace userEvent.focus with custom solution
wojtekmaj Oct 31, 2025
7a5b743
Replace userEvent.focusIn with custom solution
wojtekmaj Oct 31, 2025
f7e5dbb
Replace userEvent.blur with custom solution
wojtekmaj Oct 31, 2025
57f7606
Use act() from react-dom/test-utils
wojtekmaj Oct 31, 2025
eabe3c1
Remove useless packages
wojtekmaj Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions packages/react-date-picker/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,6 @@
},
"devDependencies": {
"@biomejs/biome": "2.2.2",
"@testing-library/dom": "^10.0.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^16.0.0",
"@types/node": "*",
"@types/react": "*",
"@types/react-dom": "*",
Expand Down
222 changes: 134 additions & 88 deletions packages/react-date-picker/src/DateInput.spec.tsx
View file
Open in desktop

Large diffs are not rendered by default.

86 changes: 43 additions & 43 deletions packages/react-date-picker/src/DateInput/DayInput.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { describe, expect, it } from 'vitest';
import { render } from '@testing-library/react';
import { render } from 'vitest-browser-react';
import { createRef } from 'react';

import DayInput from './DayInput.js';
Expand All @@ -12,149 +12,149 @@ describe('DayInput', () => {
},
} satisfies React.ComponentProps<typeof DayInput>;

it('renders an input', () => {
const { container } = render(<DayInput {...defaultProps} />);
it('renders an input', async () => {
const { container } = await render(<DayInput {...defaultProps} />);

const input = container.querySelector('input');

expect(input).toBeInTheDocument();
});

it('renders "0" given showLeadingZeros if day is <10', () => {
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="9" />);
it('renders "0" given showLeadingZeros if day is <10', async () => {
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="9" />);

const input = container.querySelector('input');

expect(container).toHaveTextContent('0');
expect(input).toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

it('does not render "0" given showLeadingZeros if day is <10 with leading zero already', () => {
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="09" />);
it('does not render "0" given showLeadingZeros if day is <10 with leading zero already', async () => {
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="09" />);

const input = container.querySelector('input');

expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

it('does not render "0" given showLeadingZeros if day is >=10', () => {
const { container } = render(<DayInput {...defaultProps} showLeadingZeros value="10" />);
it('does not render "0" given showLeadingZeros if day is >=10', async () => {
const { container } = await render(<DayInput {...defaultProps} showLeadingZeros value="10" />);

const input = container.querySelector('input');

expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

it('does not render "0" if not given showLeadingZeros', () => {
const { container } = render(<DayInput {...defaultProps} value="9" />);
it('does not render "0" if not given showLeadingZeros', async () => {
const { container } = await render(<DayInput {...defaultProps} value="9" />);

const input = container.querySelector('input');

expect(container).not.toHaveTextContent('0');
expect(input).not.toHaveClass(`${defaultProps.className}__input--hasLeadingZero`);
});

it('applies given aria-label properly', () => {
it('applies given aria-label properly', async () => {
const dayAriaLabel = 'Day';

const { container } = render(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);
const { container } = await render(<DayInput {...defaultProps} ariaLabel={dayAriaLabel} />);

const input = container.querySelector('input');

expect(input).toHaveAttribute('aria-label', dayAriaLabel);
});

it('applies given placeholder properly', () => {
it('applies given placeholder properly', async () => {
const dayPlaceholder = 'dd';

const { container } = render(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);
const { container } = await render(<DayInput {...defaultProps} placeholder={dayPlaceholder} />);

const input = container.querySelector('input');

expect(input).toHaveAttribute('placeholder', dayPlaceholder);
});

it('has proper name defined', () => {
const { container } = render(<DayInput {...defaultProps} />);
it('has proper name defined', async () => {
const { container } = await render(<DayInput {...defaultProps} />);

const input = container.querySelector('input');

expect(input).toHaveAttribute('name', 'day');
});

it('has proper className defined', () => {
it('has proper className defined', async () => {
const className = 'react-date-picker';

const { container } = render(<DayInput {...defaultProps} className={className} />);
const { container } = await render(<DayInput {...defaultProps} className={className} />);

const input = container.querySelector('input');

expect(input).toHaveClass('react-date-picker__input');
expect(input).toHaveClass('react-date-picker__day');
});

it('displays given value properly', () => {
it('displays given value properly', async () => {
const value = '11';

const { container } = render(<DayInput {...defaultProps} value={value} />);
const { container } = await render(<DayInput {...defaultProps} value={value} />);

const input = container.querySelector('input');

expect(input).toHaveValue(Number(value));
});

it('does not disable input by default', () => {
const { container } = render(<DayInput {...defaultProps} />);
it('does not disable input by default', async () => {
const { container } = await render(<DayInput {...defaultProps} />);

const input = container.querySelector('input');

expect(input).not.toBeDisabled();
});

it('disables input given disabled flag', () => {
const { container } = render(<DayInput {...defaultProps} disabled />);
it('disables input given disabled flag', async () => {
const { container } = await render(<DayInput {...defaultProps} disabled />);

const input = container.querySelector('input');

expect(input).toBeDisabled();
});

it('is not required input by default', () => {
const { container } = render(<DayInput {...defaultProps} />);
it('is not required input by default', async () => {
const { container } = await render(<DayInput {...defaultProps} />);

const input = container.querySelector('input');

expect(input).not.toBeRequired();
});

it('required input given required flag', () => {
const { container } = render(<DayInput {...defaultProps} required />);
it('required input given required flag', async () => {
const { container } = await render(<DayInput {...defaultProps} required />);

const input = container.querySelector('input');

expect(input).toBeRequired();
});

it('handles inputRef properly', () => {
it('handles inputRef properly', async () => {
const inputRef = createRef<HTMLInputElement>();

render(<DayInput {...defaultProps} inputRef={inputRef} />);
await render(<DayInput {...defaultProps} inputRef={inputRef} />);

expect(inputRef.current).toBeInstanceOf(HTMLInputElement);
});

it('has min = "1" by default', () => {
const { container } = render(<DayInput {...defaultProps} />);
it('has min = "1" by default', async () => {
const { container } = await render(<DayInput {...defaultProps} />);

const input = container.querySelector('input');

expect(input).toHaveAttribute('min', '1');
});

it('has min = "1" given minDate in a past month', () => {
const { container } = render(
it('has min = "1" given minDate in a past month', async () => {
const { container } = await render(
<DayInput {...defaultProps} minDate={new Date(2017, 11, 15)} month="1" year="2018" />,
);

Expand All @@ -163,8 +163,8 @@ describe('DayInput', () => {
expect(input).toHaveAttribute('min', '1');
});

it('has min = (day in minDate) given minDate in a current month', () => {
const { container } = render(
it('has min = (day in minDate) given minDate in a current month', async () => {
const { container } = await render(
<DayInput {...defaultProps} minDate={new Date(2018, 0, 15)} month="1" year="2018" />,
);

Expand All @@ -173,20 +173,20 @@ describe('DayInput', () => {
expect(input).toHaveAttribute('min', '15');
});

it('has max = (number of days in current month) by default', () => {
it('has max = (number of days in current month) by default', async () => {
const numberOfDaysInJanuary2018 = new Date(2018, 1, 0).getDate();

const { container } = render(<DayInput {...defaultProps} month="1" year="2018" />);
const { container } = await render(<DayInput {...defaultProps} month="1" year="2018" />);

const input = container.querySelector('input');

expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
});

it('has max = (number of days in current month) given maxDate in a future month', () => {
it('has max = (number of days in current month) given maxDate in a future month', async () => {
const numberOfDaysInJanuary2018 = new Date(2018, 1, 0).getDate();

const { container } = render(
const { container } = await render(
<DayInput {...defaultProps} maxDate={new Date(2018, 1, 15)} month="1" year="2018" />,
);

Expand All @@ -195,8 +195,8 @@ describe('DayInput', () => {
expect(input).toHaveAttribute('max', `${numberOfDaysInJanuary2018}`);
});

it('has max = (day in maxDate) given maxDate in a current month', () => {
const { container } = render(
it('has max = (day in maxDate) given maxDate in a current month', async () => {
const { container } = await render(
<DayInput {...defaultProps} maxDate={new Date(2018, 0, 15)} month="1" year="2018" />,
);

Expand Down
Loading