Skip to content

Commit 3594cda

Browse files
wojtekmajwojtekmaj
committed
Migrate from RTL to vitest-browser-react (#448)
1 parent 3cf6e4b commit 3594cda

File tree

7 files changed

+434
-576
lines changed

7 files changed

+434
-576
lines changed

‎packages/react-datetime-picker/package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,6 @@
5656
},
5757
"devDependencies": {
5858
"@biomejs/biome": "2.2.2",
59-
"@testing-library/dom": "^10.0.0",
60-
"@testing-library/jest-dom": "^6.0.0",
61-
"@testing-library/react": "^16.0.0",
6259
"@types/node": "*",
6360
"@types/react": "*",
6461
"@types/react-dom": "*",

‎packages/react-datetime-picker/src/DateTimeInput.spec.tsx‎

Lines changed: 152 additions & 120 deletions
Large diffs are not rendered by default.

‎packages/react-datetime-picker/src/DateTimeInput/NativeInput.spec.tsx‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, expect, it } from 'vitest';
2-
import { render } from '@testing-library/react';
2+
import { render } from 'vitest-browser-react';
33

44
import NativeInput from './NativeInput.js';
55

@@ -11,18 +11,18 @@ describe('NativeInput', () => {
1111
valueType: 'second',
1212
} satisfies React.ComponentProps<typeof NativeInput>;
1313

14-
it('renders an input', () => {
15-
const { container } = render(<NativeInput {...defaultProps} />);
14+
it('renders an input', async () => {
15+
const { container } = await render(<NativeInput {...defaultProps} />);
1616

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

1919
expect(input).toBeInTheDocument();
2020
});
2121

22-
it('applies given aria-label properly', () => {
22+
it('applies given aria-label properly', async () => {
2323
const nativeInputAriaLabel = 'Date';
2424

25-
const { container } = render(
25+
const { container } = await render(
2626
<NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />,
2727
);
2828

@@ -31,10 +31,10 @@ describe('NativeInput', () => {
3131
expect(input).toHaveAttribute('aria-label', nativeInputAriaLabel);
3232
});
3333

34-
it('has proper name defined', () => {
34+
it('has proper name defined', async () => {
3535
const name = 'testName';
3636

37-
const { container } = render(<NativeInput {...defaultProps} name={name} />);
37+
const { container } = await render(<NativeInput {...defaultProps} name={name} />);
3838

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

@@ -47,52 +47,55 @@ describe('NativeInput', () => {
4747
${'second'} | ${'2017-09-30T22:17:41'}
4848
${'minute'} | ${'2017-09-30T22:17'}
4949
${'hour'} | ${'2017-09-30T22:00'}
50-
`('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
51-
const value = new Date(2017, 8, 30, 22, 17, 41);
50+
`(
51+
'displays given value properly if valueType is $valueType',
52+
async ({ valueType, parsedValue }) => {
53+
const value = new Date(2017, 8, 30, 22, 17, 41);
5254

53-
const { container } = render(
54-
<NativeInput {...defaultProps} value={value} valueType={valueType} />,
55-
);
55+
const { container } = await render(
56+
<NativeInput {...defaultProps} value={value} valueType={valueType} />,
57+
);
5658

57-
const input = container.querySelector('input');
59+
const input = container.querySelector('input');
5860

59-
expect(input).toHaveValue(parsedValue);
60-
});
61+
expect(input).toHaveValue(parsedValue);
62+
},
63+
);
6164

62-
it('does not disable input by default', () => {
63-
const { container } = render(<NativeInput {...defaultProps} />);
65+
it('does not disable input by default', async () => {
66+
const { container } = await render(<NativeInput {...defaultProps} />);
6467

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

6770
expect(input).not.toBeDisabled();
6871
});
6972

70-
it('disables input given disabled flag', () => {
71-
const { container } = render(<NativeInput {...defaultProps} disabled />);
73+
it('disables input given disabled flag', async () => {
74+
const { container } = await render(<NativeInput {...defaultProps} disabled />);
7275

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

7578
expect(input).toBeDisabled();
7679
});
7780

78-
it('is not required input by default', () => {
79-
const { container } = render(<NativeInput {...defaultProps} />);
81+
it('is not required input by default', async () => {
82+
const { container } = await render(<NativeInput {...defaultProps} />);
8083

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

8386
expect(input).not.toBeRequired();
8487
});
8588

86-
it('required input given required flag', () => {
87-
const { container } = render(<NativeInput {...defaultProps} required />);
89+
it('required input given required flag', async () => {
90+
const { container } = await render(<NativeInput {...defaultProps} required />);
8891

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

9194
expect(input).toBeRequired();
9295
});
9396

94-
it('has no min by default', () => {
95-
const { container } = render(<NativeInput {...defaultProps} />);
97+
it('has no min by default', async () => {
98+
const { container } = await render(<NativeInput {...defaultProps} />);
9699

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

@@ -106,8 +109,8 @@ describe('NativeInput', () => {
106109
${'hour'} | ${'2017-09-30T22:00'}
107110
`(
108111
'has proper min for minDate which is a full hour if valueType is $valueType',
109-
({ valueType, parsedMin }) => {
110-
const { container } = render(
112+
async ({ valueType, parsedMin }) => {
113+
const { container } = await render(
111114
<NativeInput
112115
{...defaultProps}
113116
minDate={new Date(2017, 8, 30, 22, 0, 0)}
@@ -128,8 +131,8 @@ describe('NativeInput', () => {
128131
${'hour'} | ${'2017-09-30T22:00'}
129132
`(
130133
'has proper min for minDate which is not a full hour if valueType is $valueType',
131-
({ valueType, parsedMin }) => {
132-
const { container } = render(
134+
async ({ valueType, parsedMin }) => {
135+
const { container } = await render(
133136
<NativeInput
134137
{...defaultProps}
135138
minDate={new Date(2017, 8, 30, 22, 17, 41)}
@@ -143,8 +146,8 @@ describe('NativeInput', () => {
143146
},
144147
);
145148

146-
it('has no max by default', () => {
147-
const { container } = render(<NativeInput {...defaultProps} />);
149+
it('has no max by default', async () => {
150+
const { container } = await render(<NativeInput {...defaultProps} />);
148151

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

@@ -158,8 +161,8 @@ describe('NativeInput', () => {
158161
${'hour'} | ${'2017-09-30T22:00'}
159162
`(
160163
'has proper max for maxDate which is a full hour if valueType is $valueType',
161-
({ valueType, parsedMax }) => {
162-
const { container } = render(
164+
async ({ valueType, parsedMax }) => {
165+
const { container } = await render(
163166
<NativeInput
164167
{...defaultProps}
165168
maxDate={new Date(2017, 8, 30, 22, 0, 0)}
@@ -180,8 +183,8 @@ describe('NativeInput', () => {
180183
${'hour'} | ${'2017-09-30T22:00'}
181184
`(
182185
'has proper max for maxDate which is not a full hour if valueType is $valueType',
183-
({ valueType, parsedMax }) => {
184-
const { container } = render(
186+
async ({ valueType, parsedMax }) => {
187+
const { container } = await render(
185188
<NativeInput
186189
{...defaultProps}
187190
maxDate={new Date(2017, 8, 30, 22, 17, 41)}

0 commit comments

Comments
 (0)