Refactor unit tests not to use querySelector unless absolutely necessary

Author: wojtekmaj

packages/react-time-picker/src/Divider.tsx

@@ -3,5 +3,9 @@ type DividerProps = {
 };
 
 export default function Divider({ children }: DividerProps): React.ReactElement {
-  return <span className="react-time-picker__inputGroup__divider">{children}</span>;
+  return (
+    <span className="react-time-picker__inputGroup__divider" data-testid="divider">
+      {children}
+    </span>
+  );
 }

packages/react-time-picker/src/TimeInput.spec.tsx

@@ -1,4 +1,5 @@
 import { describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
 import { render } from 'vitest-browser-react';
 
 import AmPm from './AmPm.js';
@@ -12,39 +13,39 @@ describe('AmPm', () => {
   } satisfies React.ComponentProps<typeof AmPm>;
 
   it('renders a select', async () => {
-    const { container } = await render(<AmPm {...defaultProps} />);
+    await render(<AmPm {...defaultProps} />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
+    const select = page.getByRole('combobox');
     expect(select).toBeInTheDocument();
 
-    const options = select.querySelectorAll('option');
+    const options = select.getByRole('option');
     expect(options).toHaveLength(3);
   });
 
   it('applies given aria-label properly', async () => {
     const amPmAriaLabel = 'Select AM/PM';
 
-    const { container } = await render(<AmPm {...defaultProps} ariaLabel={amPmAriaLabel} />);
+    await render(<AmPm {...defaultProps} ariaLabel={amPmAriaLabel} />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).toHaveAttribute('aria-label', amPmAriaLabel);
   });
 
   it('has proper name defined', async () => {
-    const { container } = await render(<AmPm {...defaultProps} />);
+    await render(<AmPm {...defaultProps} />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).toHaveAttribute('name', 'amPm');
   });
 
   it('has proper className defined', async () => {
     const className = 'react-time-picker';
 
-    const { container } = await render(<AmPm {...defaultProps} className={className} />);
+    await render(<AmPm {...defaultProps} className={className} />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).toHaveClass('react-time-picker__input');
     expect(select).toHaveClass('react-time-picker__amPm');
@@ -53,72 +54,72 @@ describe('AmPm', () => {
   it('displays given value properly', async () => {
     const value = 'pm';
 
-    const { container } = await render(<AmPm {...defaultProps} value={value} />);
+    await render(<AmPm {...defaultProps} value={value} />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).toHaveValue(value);
   });
 
   it('does not disable select by default', async () => {
-    const { container } = await render(<AmPm {...defaultProps} />);
+    await render(<AmPm {...defaultProps} />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).not.toBeDisabled();
   });
 
   it('disables input given disabled flag', async () => {
-    const { container } = await render(<AmPm {...defaultProps} disabled />);
+    await render(<AmPm {...defaultProps} disabled />);
 
-    const select = container.querySelector('select');
+    const select = page.getByRole('combobox');
 
     expect(select).toBeDisabled();
   });
 
   it('should not disable anything by default', async () => {
-    const { container } = await render(<AmPm {...defaultProps} />);
+    await render(<AmPm {...defaultProps} />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
-    const optionAm = select.querySelector('option[value="am"]');
-    const optionPm = select.querySelector('option[value="pm"]');
+    const select = page.getByRole('combobox');
+    const optionAm = select.element().querySelector('option[value="am"]');
+    const optionPm = select.element().querySelector('option[value="pm"]');
 
     expect(optionAm).not.toBeDisabled();
     expect(optionPm).not.toBeDisabled();
   });
 
   it('should disable "pm" given maxTime before 12:00 pm', async () => {
-    const { container } = await render(<AmPm {...defaultProps} maxTime="11:59" />);
+    await render(<AmPm {...defaultProps} maxTime="11:59" />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
-    const optionPm = select.querySelector('option[value="pm"]');
+    const select = page.getByRole('combobox');
+    const optionPm = select.element().querySelector('option[value="pm"]');
 
     expect(optionPm).toBeDisabled();
   });
 
   it('should not disable "pm" given maxTime after or equal to 12:00 pm', async () => {
-    const { container } = await render(<AmPm {...defaultProps} maxTime="12:00" />);
+    await render(<AmPm {...defaultProps} maxTime="12:00" />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
-    const optionPm = select.querySelector('option[value="pm"]');
+    const select = page.getByRole('combobox');
+    const optionPm = select.element().querySelector('option[value="pm"]');
 
     expect(optionPm).not.toBeDisabled();
   });
 
   it('should disable "am" given minTime after or equal to 12:00 pm', async () => {
-    const { container } = await render(<AmPm {...defaultProps} minTime="12:00" />);
+    await render(<AmPm {...defaultProps} minTime="12:00" />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
-    const optionAm = select.querySelector('option[value="am"]');
+    const select = page.getByRole('combobox');
+    const optionAm = select.element().querySelector('option[value="am"]');
 
     expect(optionAm).toBeDisabled();
   });
 
   it('should not disable "am" given minTime before 12:00 pm', async () => {
-    const { container } = await render(<AmPm {...defaultProps} minTime="11:59" />);
+    await render(<AmPm {...defaultProps} minTime="11:59" />);
 
-    const select = container.querySelector('select') as HTMLSelectElement;
-    const optionAm = select.querySelector('option[value="pm"]');
+    const select = page.getByRole('combobox');
+    const optionAm = select.element().querySelector('option[value="pm"]');
 
     expect(optionAm).not.toBeDisabled();
   });