refactor: refactor unit tests

Author: ElenaBitire

src/components/login-form.test.tsx

@@ -12,17 +12,17 @@ const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();
 describe('LoginForm Form ', () => {
   it('renders correctly', async () => {
     render(<LoginForm />);
-    expect(await screen.findByText(/Sign in/i)).not.toBeNull();
+    expect(await screen.findByText(/Sign in/i)).toBeOnTheScreen();
   });
 
   it('should display required error when values are empty', async () => {
     render(<LoginForm />);
 
     const button = screen.getByTestId('login-button');
-    expect(screen.queryByText(/Email is required/i)).toBeNull();
+    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
     fireEvent.press(button);
-    expect(await screen.findByText(/Email is required/i)).not.toBeNull();
-    expect(screen.getByText(/Password is required/i)).not.toBeNull();
+    expect(await screen.findByText(/Email is required/i)).toBeOnTheScreen();
+    expect(screen.getByText(/Password is required/i)).toBeOnTheScreen();
   });
 
   it('should display matching error when email is invalid', async () => {
@@ -36,8 +36,8 @@ describe('LoginForm Form ', () => {
     fireEvent.changeText(passwordInput, 'test');
     fireEvent.press(button);
 
-    expect(screen.queryByText(/Email is required/i)).toBeNull();
-    expect(await screen.findByText(/Invalid Email Format/i)).not.toBeNull();
+    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
+    expect(await screen.findByText(/Invalid Email Format/i)).toBeOnTheScreen();
   });
 
   it('Should call LoginForm with correct values when values are valid', async () => {

src/ui/button.test.tsx

@@ -66,7 +66,7 @@ describe('Button component ', () => {
         variant="secondary"
       />
     );
-    expect(screen.getByTestId('button')).not.toBeNull();
+    expect(screen.getByTestId('button')).toBeOnTheScreen();
     fireEvent.press(screen.getByTestId('button'));
     expect(screen.getByTestId('button').props.accessibilityState.disabled).toBe(
       true

src/ui/checkbox.test.tsx

@@ -20,8 +20,8 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('checkbox')).not.toBeNull();
-    expect(screen.queryByTestId('checkbox-label')).toBeNull();
+    expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
+    expect(screen.queryByTestId('checkbox-label')).not.toBeOnTheScreen();
     expect(
       screen.getByTestId('checkbox').props.accessibilityState.checked
     ).toBe(false);
@@ -48,7 +48,7 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('checkbox')).not.toBeNull();
+    expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
 
     fireEvent.press(screen.getByTestId('checkbox'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
@@ -65,8 +65,8 @@ describe('Checkbox, Radio & Switch components ', () => {
         label="I agree to terms and conditions"
       />
     );
-    expect(screen.queryByTestId('checkbox')).not.toBeNull();
-    expect(screen.queryByTestId('checkbox-label')).not.toBeNull();
+    expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
+    expect(screen.getByTestId('checkbox-label')).toBeOnTheScreen();
     expect(
       screen.getByTestId('checkbox').props.accessibilityState.checked
     ).toBe(false);
@@ -77,7 +77,7 @@ describe('Checkbox, Radio & Switch components ', () => {
       'agree'
     );
 
-    expect(screen.queryByTestId('checkbox-label')?.props.children).toBe(
+    expect(screen.getByTestId('checkbox-label')?.props.children).toBe(
       'I agree to terms and conditions'
     );
     fireEvent.press(screen.getByTestId('checkbox'));
@@ -94,8 +94,8 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('radio')).not.toBeNull();
-    expect(screen.queryByTestId('radio-label')).toBeNull();
+    expect(screen.getByTestId('radio')).toBeOnTheScreen();
+    expect(screen.queryByTestId('radio-label')).not.toBeOnTheScreen();
 
     expect(screen.getByTestId('radio').props.accessibilityState.checked).toBe(
       false
@@ -118,9 +118,9 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('radio')).not.toBeNull();
-    expect(screen.queryByTestId('radio-label')).not.toBeNull();
-    expect(screen.queryByTestId('radio-label')?.props.children).toBe(
+    expect(screen.getByTestId('radio')).toBeOnTheScreen();
+    expect(screen.getByTestId('radio-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('radio-label')?.props.children).toBe(
       'I agree to terms and conditions'
     );
 
@@ -145,7 +145,7 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('radio')).not.toBeNull();
+    expect(screen.getByTestId('radio')).toBeOnTheScreen();
 
     fireEvent.press(screen.getByTestId('radio'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
@@ -161,8 +161,8 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('switch')).not.toBeNull();
-    expect(screen.queryByTestId('switch-label')).toBeNull();
+    expect(screen.getByTestId('switch')).toBeOnTheScreen();
+    expect(screen.queryByTestId('switch-label')).not.toBeOnTheScreen();
 
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
       false
@@ -185,9 +185,9 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('switch')).not.toBeNull();
-    expect(screen.queryByTestId('switch-label')).not.toBeNull();
-    expect(screen.queryByTestId('switch-label')?.props.children).toBe(
+    expect(screen.getByTestId('switch')).toBeOnTheScreen();
+    expect(screen.getByTestId('switch-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('switch-label')?.props.children).toBe(
       'I agree to terms and conditions'
     );
     expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
@@ -211,7 +211,7 @@ describe('Checkbox, Radio & Switch components ', () => {
         accessibilityHint="toggle Agree"
       />
     );
-    expect(screen.queryByTestId('switch')).not.toBeNull();
+    expect(screen.getByTestId('switch')).toBeOnTheScreen();
     fireEvent.press(screen.getByTestId('switch'));
     expect(mockOnChange).toHaveBeenCalledTimes(0);
   });

src/ui/input.test.tsx

@@ -10,29 +10,33 @@ afterEach(cleanup);
 describe('Input component ', () => {
   it('renders correctly ', () => {
     render(<Input testID="text-input" />);
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
+    const input = screen.getByTestId('text-input');
+    expect(input).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
   });
 
   it('should render the placeholder correctly ', () => {
     render(<Input testID="text-input" placeholder="Enter your username" />);
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
-    expect(screen.getByPlaceholderText('Enter your username')).toBeDefined();
+    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    expect(
+      screen.getByPlaceholderText('Enter your username')
+    ).toBeOnTheScreen();
   });
 
   it('should render the label correctly ', () => {
     render(<Input testID="text-input" label="Username" />);
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-label')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-label')?.props.children).toBe(
+    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-label')?.props.children).toBe(
       'Username'
     );
   });
 
   it('should render the error message correctly ', () => {
     render(<Input testID="text-input" error="This is an error message" />);
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-error')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-error')?.props.children).toBe(
+    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-error')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-error')?.props.children).toBe(
       'This is an error message'
     );
   });
@@ -45,16 +49,18 @@ describe('Input component ', () => {
         error="This is an error message"
       />
     );
-    expect(screen.queryByTestId('text-input')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-label')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-label')?.props.children).toBe(
+    expect(screen.getByTestId('text-input')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-label')?.props.children).toBe(
       'Username'
     );
-    expect(screen.queryByTestId('text-input-error')).not.toBeNull();
-    expect(screen.queryByTestId('text-input-error')?.props.children).toBe(
+    expect(screen.getByTestId('text-input-error')).toBeOnTheScreen();
+    expect(screen.getByTestId('text-input-error')?.props.children).toBe(
       'This is an error message'
     );
-    expect(screen.getByPlaceholderText('Enter your username')).toBeDefined();
+    expect(
+      screen.getByPlaceholderText('Enter your username')
+    ).toBeOnTheScreen();
   });
 
   it('should trigger onFocus event correctly ', () => {

src/ui/select.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines-per-function */
 import React from 'react';
 
-import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
+import { cleanup, fireEvent, render, screen } from '@/core/test-utils';
 import type { Option } from '@/ui';
 
 import { Select } from './select';
@@ -24,8 +24,8 @@ describe('Select component ', () => {
         testID="test-select"
       />
     );
-    expect(screen.queryByTestId('test-select-trigger')).not.toBeNull();
-    expect(screen.queryByTestId('test-select-label')).not.toBeNull();
+    expect(screen.getByTestId('test-select-trigger')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-label')).toBeOnTheScreen();
   });
 
   it('should render the label correctly ', () => {
@@ -38,9 +38,9 @@ describe('Select component ', () => {
         testID="test-select"
       />
     );
-    expect(screen.queryByTestId('test-select-trigger')).not.toBeNull();
-    expect(screen.queryByTestId('test-select-label')).not.toBeNull();
-    expect(screen.queryByTestId('test-select-label')?.props.children).toBe(
+    expect(screen.getByTestId('test-select-trigger')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-label')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-label')?.props.children).toBe(
       'Select'
     );
   });
@@ -56,14 +56,14 @@ describe('Select component ', () => {
         error="Please select an option"
       />
     );
-    expect(screen.queryByTestId('test-select-trigger')).not.toBeNull();
-    expect(screen.queryByTestId('test-select-error')).not.toBeNull();
-    expect(screen.queryByTestId('test-select-error')?.props.children).toBe(
+    expect(screen.getByTestId('test-select-trigger')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-error')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-error')?.props.children).toBe(
       'Please select an option'
     );
   });
 
-  it('should open options modal on press', async () => {
+  it('should open options modal on press', () => {
     render(
       <Select
         label="Select"
@@ -76,14 +76,12 @@ describe('Select component ', () => {
     const selectTrigger = screen.getByTestId('test-select-trigger');
     fireEvent.press(selectTrigger);
 
-    await waitFor(() => {
-      expect(screen.getByTestId('test-select-item-chocolate')).not.toBeNull();
-      expect(screen.getByTestId('test-select-item-strawberry')).not.toBeNull();
-      expect(screen.getByTestId('test-select-item-vanilla')).not.toBeNull();
-    });
+    expect(screen.getByTestId('test-select-item-chocolate')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-item-strawberry')).toBeOnTheScreen();
+    expect(screen.getByTestId('test-select-item-vanilla')).toBeOnTheScreen();
   });
 
-  it('should call onSelect on selecting an option', async () => {
+  it('should call onSelect on selecting an option', () => {
     const onSelect = jest.fn();
 
     render(
@@ -96,8 +94,6 @@ describe('Select component ', () => {
     const optionItem1 = screen.getByTestId('test-select-item-chocolate');
     fireEvent.press(optionItem1);
 
-    await waitFor(() => {
-      expect(onSelect).toHaveBeenCalledWith(options[0].value);
-    });
+    expect(onSelect).toHaveBeenCalledWith(options[0].value);
   });
 });