Migrate from RTL to vitest-browser-react

packages/react-datetime-picker/package.json

@@ -56,9 +56,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": "*",

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { render } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
 
 import NativeInput from './NativeInput.js';
 
@@ -11,18 +11,18 @@ describe('NativeInput', () => {
     valueType: 'second',
   } satisfies React.ComponentProps<typeof NativeInput>;
 
-  it('renders an input', () => {
-    const { container } = render(<NativeInput {...defaultProps} />);
+  it('renders an input', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} />);
 
     const input = container.querySelector('input');
 
     expect(input).toBeInTheDocument();
   });
 
-  it('applies given aria-label properly', () => {
+  it('applies given aria-label properly', async () => {
     const nativeInputAriaLabel = 'Date';
 
-    const { container } = render(
+    const { container } = await render(
       <NativeInput {...defaultProps} ariaLabel={nativeInputAriaLabel} />,
     );
 
@@ -31,10 +31,10 @@ describe('NativeInput', () => {
     expect(input).toHaveAttribute('aria-label', nativeInputAriaLabel);
   });
 
-  it('has proper name defined', () => {
+  it('has proper name defined', async () => {
     const name = 'testName';
 
-    const { container } = render(<NativeInput {...defaultProps} name={name} />);
+    const { container } = await render(<NativeInput {...defaultProps} name={name} />);
 
     const input = container.querySelector('input');
 
@@ -47,52 +47,55 @@ describe('NativeInput', () => {
     ${'second'} | ${'2017-09-30T22:17:41'}
     ${'minute'} | ${'2017-09-30T22:17'}
     ${'hour'}   | ${'2017-09-30T22:00'}
-  `('displays given value properly if valueType is $valueType', ({ valueType, parsedValue }) => {
-    const value = new Date(2017, 8, 30, 22, 17, 41);
+  `(
+    'displays given value properly if valueType is $valueType',
+    async ({ valueType, parsedValue }) => {
+      const value = new Date(2017, 8, 30, 22, 17, 41);
 
-    const { container } = render(
-      <NativeInput {...defaultProps} value={value} valueType={valueType} />,
-    );
+      const { container } = await render(
+        <NativeInput {...defaultProps} value={value} valueType={valueType} />,
+      );
 
-    const input = container.querySelector('input');
+      const input = container.querySelector('input');
 
-    expect(input).toHaveValue(parsedValue);
-  });
+      expect(input).toHaveValue(parsedValue);
+    },
+  );
 
-  it('does not disable input by default', () => {
-    const { container } = render(<NativeInput {...defaultProps} />);
+  it('does not disable input by default', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} />);
 
     const input = container.querySelector('input');
 
     expect(input).not.toBeDisabled();
   });
 
-  it('disables input given disabled flag', () => {
-    const { container } = render(<NativeInput {...defaultProps} disabled />);
+  it('disables input given disabled flag', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} disabled />);
 
     const input = container.querySelector('input');
 
     expect(input).toBeDisabled();
   });
 
-  it('is not required input by default', () => {
-    const { container } = render(<NativeInput {...defaultProps} />);
+  it('is not required input by default', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} />);
 
     const input = container.querySelector('input');
 
     expect(input).not.toBeRequired();
   });
 
-  it('required input given required flag', () => {
-    const { container } = render(<NativeInput {...defaultProps} required />);
+  it('required input given required flag', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} required />);
 
     const input = container.querySelector('input');
 
     expect(input).toBeRequired();
   });
 
-  it('has no min by default', () => {
-    const { container } = render(<NativeInput {...defaultProps} />);
+  it('has no min by default', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} />);
 
     const input = container.querySelector('input');
 
@@ -106,8 +109,8 @@ describe('NativeInput', () => {
     ${'hour'}   | ${'2017-09-30T22:00'}
   `(
     'has proper min for minDate which is a full hour if valueType is $valueType',
-    ({ valueType, parsedMin }) => {
-      const { container } = render(
+    async ({ valueType, parsedMin }) => {
+      const { container } = await render(
         <NativeInput
           {...defaultProps}
           minDate={new Date(2017, 8, 30, 22, 0, 0)}
@@ -128,8 +131,8 @@ describe('NativeInput', () => {
     ${'hour'}   | ${'2017-09-30T22:00'}
   `(
     'has proper min for minDate which is not a full hour if valueType is $valueType',
-    ({ valueType, parsedMin }) => {
-      const { container } = render(
+    async ({ valueType, parsedMin }) => {
+      const { container } = await render(
         <NativeInput
           {...defaultProps}
           minDate={new Date(2017, 8, 30, 22, 17, 41)}
@@ -143,8 +146,8 @@ describe('NativeInput', () => {
     },
   );
 
-  it('has no max by default', () => {
-    const { container } = render(<NativeInput {...defaultProps} />);
+  it('has no max by default', async () => {
+    const { container } = await render(<NativeInput {...defaultProps} />);
 
     const input = container.querySelector('input');
 
@@ -158,8 +161,8 @@ describe('NativeInput', () => {
     ${'hour'}   | ${'2017-09-30T22:00'}
   `(
     'has proper max for maxDate which is a full hour if valueType is $valueType',
-    ({ valueType, parsedMax }) => {
-      const { container } = render(
+    async ({ valueType, parsedMax }) => {
+      const { container } = await render(
         <NativeInput
           {...defaultProps}
           maxDate={new Date(2017, 8, 30, 22, 0, 0)}
@@ -180,8 +183,8 @@ describe('NativeInput', () => {
     ${'hour'}   | ${'2017-09-30T22:00'}
   `(
     'has proper max for maxDate which is not a full hour if valueType is $valueType',
-    ({ valueType, parsedMax }) => {
-      const { container } = render(
+    async ({ valueType, parsedMax }) => {
+      const { container } = await render(
         <NativeInput
           {...defaultProps}
           maxDate={new Date(2017, 8, 30, 22, 17, 41)}