Skip to content

Commit 8e84c61

Browse files
wojtekmajwojtekmaj
authored
Migrate from RTL to vitest-browser-react (#707)
1 parent 2300528 commit 8e84c61

File tree

11 files changed

+505
-631
lines changed

11 files changed

+505
-631
lines changed

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,6 @@
5959
},
6060
"devDependencies": {
6161
"@biomejs/biome": "2.2.2",
62-
"@testing-library/dom": "^10.0.0",
63-
"@testing-library/jest-dom": "^6.0.0",
64-
"@testing-library/react": "^16.0.0",
6562
"@types/node": "*",
6663
"@types/react": "*",
6764
"@types/react-dom": "*",

‎packages/react-date-picker/src/DateInput.spec.tsx‎

Lines changed: 134 additions & 88 deletions
Large diffs are not rendered by default.

‎packages/react-date-picker/src/DateInput/DayInput.spec.tsx‎

Lines changed: 43 additions & 43 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
import { createRef } from 'react';
44

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

69-
it('applies given placeholder properly', () => {
69+
it('applies given placeholder properly', async () => {
7070
const dayPlaceholder = 'dd';
7171

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

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

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

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

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

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

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

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

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

9494
expect(input).toHaveClass('react-date-picker__input');
9595
expect(input).toHaveClass('react-date-picker__day');
9696
});
9797

98-
it('displays given value properly', () => {
98+
it('displays given value properly', async () => {
9999
const value = '11';
100100

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

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

105105
expect(input).toHaveValue(Number(value));
106106
});
107107

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

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

113113
expect(input).not.toBeDisabled();
114114
});
115115

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

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

121121
expect(input).toBeDisabled();
122122
});
123123

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

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

129129
expect(input).not.toBeRequired();
130130
});
131131

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

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

137137
expect(input).toBeRequired();
138138
});
139139

140-
it('handles inputRef properly', () => {
140+
it('handles inputRef properly', async () => {
141141
const inputRef = createRef<HTMLInputElement>();
142142

143-
render(<DayInput {...defaultProps} inputRef={inputRef} />);
143+
await render(<DayInput {...defaultProps} inputRef={inputRef} />);
144144

145145
expect(inputRef.current).toBeInstanceOf(HTMLInputElement);
146146
});
147147

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)