refactor: fix eslint issues in tests

src/client/components/Layout/Layout.test.tsx

@@ -44,7 +44,7 @@ describe('Test: Layout', () => {
     // Act
     await waitFor(() => {
       expect(removeItemSpy).toBeCalledWith('token');
-      expect(pushFn).toBeCalledWith('/login');
     });
+    expect(pushFn).toBeCalledWith('/login');
   });
 });

src/client/components/hoc/AuthProvider/AuthProvider.test.tsx

@@ -1,32 +1,38 @@
 import React from 'react';
-import { render, screen, waitFor } from '../../../../../tests/test-utils';
+import { render, screen } from '../../../../../tests/test-utils';
 import { getTRPCMock } from '../../../mocks/getTrpcMock';
 import { server } from '../../../mocks/server';
 import { AuthProvider } from './AuthProvider';
 
 describe('Test: AuthProvider', () => {
   it('should render login form if user is not logged in', async () => {
+    // arrange
     render(
       <AuthProvider>
         <div>Should not render</div>
       </AuthProvider>,
     );
     server.use(getTRPCMock({ path: ['auth', 'me'], type: 'query', response: null }));
-    await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument());
+
+    // assert
+    await screen.findByText('Login');
     expect(screen.queryByText('Should not render')).not.toBeInTheDocument();
   });
 
   it('should render children if user is logged in', async () => {
+    // arrange
     render(
       <AuthProvider>
         <div>Should render</div>
       </AuthProvider>,
     );
 
-    await waitFor(() => expect(screen.getByText('Should render')).toBeInTheDocument());
+    // assert
+    await screen.findByText('Should render');
   });
 
   it('should render register form if app is not configured', async () => {
+    // arrange
     server.use(getTRPCMock({ path: ['auth', 'me'], type: 'query', response: null }));
     server.use(getTRPCMock({ path: ['auth', 'isConfigured'], type: 'query', response: false }));
 
@@ -36,7 +42,8 @@ describe('Test: AuthProvider', () => {
       </AuthProvider>,
     );
 
-    await waitFor(() => expect(screen.getByText('Register your account')).toBeInTheDocument());
+    // assert
+    await screen.findByText('Register your account');
     expect(screen.queryByText('Should not render')).not.toBeInTheDocument();
   });
 });

src/client/components/ui/Button/Button.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, cleanup } from '@testing-library/react';
+import { render, fireEvent, cleanup, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { Button } from './Button';
 
@@ -7,44 +7,69 @@ afterEach(cleanup);
 
 describe('Button component', () => {
   it('should render without crashing', () => {
-    const { container } = render(<Button>Click me</Button>);
-    expect(container).toBeTruthy();
+    render(<Button>Click me</Button>);
   });
 
   it('should render children correctly', () => {
-    const { getByText } = render(<Button>Click me</Button>);
-    expect(getByText('Click me')).toBeInTheDocument();
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
   });
 
   it('should apply className prop correctly', () => {
-    const { container } = render(<Button className="test-class">Click me</Button>);
-    expect(container.querySelector('button')).toHaveClass('test-class');
+    // arrange
+    render(<Button className="test-class">Click me</Button>);
+    const button = screen.getByRole('button');
+
+    // assert
+    expect(button).toHaveClass('test-class');
   });
 
   it('should render spinner when loading prop is true', () => {
-    const { container } = render(<Button loading>Click me</Button>);
-    expect(container.querySelector('.spinner-border')).toBeInTheDocument();
+    // arrange
+    render(<Button loading>Click me</Button>);
+
+    // assert
+    const status = screen.getByTestId('loader');
+    expect(status).toBeInTheDocument();
   });
 
   it('should disable button when disabled prop is true', () => {
-    const { container } = render(<Button disabled>Click me</Button>);
-    expect(container.querySelector('button')).toBeDisabled();
+    // arrange
+    render(<Button disabled>Click me</Button>);
+    const button = screen.getByRole('button');
+
+    // assert
+    expect(button).toBeDisabled();
   });
 
   it('should set type correctly', () => {
-    const { container } = render(<Button type="submit">Click me</Button>);
-    expect(container.querySelector('button')).toHaveAttribute('type', 'submit');
+    // arrange
+    render(<Button type="submit">Click me</Button>);
+    const button = screen.getByRole('button');
+
+    // assert
+    expect(button).toHaveAttribute('type', 'submit');
   });
 
   it('should applies width correctly', () => {
-    const { container } = render(<Button width={100}>Click me</Button>);
-    expect(container.querySelector('button')).toHaveStyle('width: 100px');
+    // arrange
+    render(<Button width={100}>Click me</Button>);
+    const button = screen.getByRole('button');
+
+    // assert
+    expect(button).toHaveStyle('width: 100px');
   });
 
   it('should call onClick callback when clicked', () => {
+    // arrange
     const onClick = jest.fn();
-    const { container } = render(<Button onClick={onClick}>Click me</Button>);
-    fireEvent.click(container.querySelector('button') as HTMLButtonElement);
+    render(<Button onClick={onClick}>Click me</Button>);
+    const button = screen.getByRole('button');
+
+    // act
+    fireEvent.click(button);
+
+    // assert
     expect(onClick).toHaveBeenCalled();
   });
 });

src/client/components/ui/Button/Button.tsx

@@ -15,7 +15,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IProps>(({ type, class
   const styles = { width: width ? `${width}px` : 'auto' };
   return (
     <button style={styles} onClick={onClick} disabled={disabled || loading} ref={ref} className={clsx('btn', className, { disabled: disabled || loading })} type={type} {...rest}>
-      {loading ? <span className="spinner-border spinner-border-sm mb-1 mx-2" role="status" aria-hidden="true" /> : children}
+      {loading ? <span className="spinner-border spinner-border-sm mb-1 mx-2" role="status" data-testid="loader" aria-hidden="true" /> : children}
     </button>
   );
 });

src/client/components/ui/DataGrid/DataGrid.test.tsx

@@ -1,33 +1,32 @@
 import React from 'react';
-import { render } from '../../../../../tests/test-utils';
+import { render, screen } from '../../../../../tests/test-utils';
 import { DataGrid } from './DataGrid';
 import { DataGridItem } from './DataGridItem';
 
 describe('DataGrid', () => {
-  it('renders its children', () => {
-    const { getByText } = render(
-      <DataGrid>
-        <p>Test child</p>
-      </DataGrid>,
-    );
+  it('should renders its children', () => {
+    // arrange
+    render(<DataGrid>Test child</DataGrid>);
 
-    expect(getByText('Test child')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Test child')).toBeInTheDocument();
   });
 });
 
 describe('DataGridItem', () => {
   it('renders its children', () => {
-    const { getByText } = render(
-      <DataGridItem title="">
-        <p>Test child</p>
-      </DataGridItem>,
-    );
+    // arrange
+    render(<DataGridItem title="">Test child</DataGridItem>);
 
-    expect(getByText('Test child')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Test child')).toBeInTheDocument();
   });
 
   it('renders the correct title', () => {
-    const { getByText } = render(<DataGridItem title="Test Title">Hello</DataGridItem>);
-    expect(getByText('Test Title')).toBeInTheDocument();
+    // arrange
+    render(<DataGridItem title="Test Title">Hello</DataGridItem>);
+
+    // assert
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
   });
 });

src/client/components/ui/EmptyPage/EmptyPage.test.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
-import { fireEvent, render } from '../../../../../tests/test-utils';
+import { fireEvent, screen, render } from '../../../../../tests/test-utils';
 import { EmptyPage } from './EmptyPage';
 
 describe('<EmptyPage />', () => {
   it('should render the title and subtitle', () => {
-    const { getByText } = render(<EmptyPage title="Title" subtitle="Subtitle" />);
+    // arrange
+    render(<EmptyPage title="Title" subtitle="Subtitle" />);
 
-    expect(getByText('Title')).toBeInTheDocument();
-    expect(getByText('Subtitle')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Subtitle')).toBeInTheDocument();
   });
 
   it('should render the action button and trigger the onAction callback', () => {
+    // arrange
     const onAction = jest.fn();
-    const { getByText } = render(<EmptyPage title="Title" onAction={onAction} actionLabel="Action" />);
+    render(<EmptyPage title="Title" onAction={onAction} actionLabel="Action" />);
 
-    expect(getByText('Action')).toBeInTheDocument();
+    // act
+    fireEvent.click(screen.getByText('Action'));
 
-    fireEvent.click(getByText('Action'));
+    // assert
     expect(onAction).toHaveBeenCalled();
   });
 
   it('should not render the action button if onAction is not provided', () => {
-    const { queryByText } = render(<EmptyPage title="Title" actionLabel="Action" />);
+    // arrange
+    render(<EmptyPage title="Title" actionLabel="Action" />);
 
-    expect(queryByText('Action')).not.toBeInTheDocument();
+    // assert
+    expect(screen.queryByText('Action')).not.toBeInTheDocument();
   });
 });

src/client/components/ui/Input/Input.test.tsx

@@ -1,105 +1,149 @@
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import { Input } from './Input';
-import { fireEvent, render, waitFor } from '../../../../../tests/test-utils';
+import { fireEvent, render, waitFor, screen } from '../../../../../tests/test-utils';
 
 describe('Input', () => {
   it('should render without errors', () => {
+    // arrange
     const { container } = render(<Input name="test-input" />);
+
+    // assert
     expect(container).toBeTruthy();
   });
 
   it('should render the label if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" />);
-    const input = getByLabelText('Test Label');
-    expect(input).toBeTruthy();
+    // arrange
+    render(<Input name="test-input" label="Test Label" />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
+    expect(input).toBeInTheDocument();
   });
 
   it('should render the placeholder if provided', () => {
-    const { getByPlaceholderText } = render(<Input name="test-input" placeholder="Test Placeholder" />);
-    const input = getByPlaceholderText('Test Placeholder');
-    expect(input).toBeTruthy();
+    // arrange
+    render(<Input name="test-input" placeholder="Test Placeholder" />);
+
+    // assert
+    const input = screen.getByPlaceholderText('Test Placeholder');
+    expect(input).toBeInTheDocument();
   });
 
   it('should render the error message if provided', () => {
-    const { getByText } = render(<Input name="test-input" error="Test Error" />);
-    const error = getByText('Test Error');
-    expect(error).toBeTruthy();
+    // arrange
+    render(<Input name="test-input" error="Test Error" />);
+
+    // assert
+    const error = screen.getByText('Test Error');
+    expect(error).toBeInTheDocument();
   });
 
   it('should call onChange when the input value is changed', async () => {
+    // arrange
     const onChange = jest.fn();
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" onChange={onChange} />);
-    const input = getByLabelText('Test Label');
+    render(<Input name="test-input" label="Test Label" onChange={onChange} />);
+    const input = screen.getByLabelText('Test Label');
+
+    // act
     fireEvent.change(input, { target: { value: 'changed' } });
+
+    // assert
     await waitFor(() => expect(onChange).toHaveBeenCalledTimes(1));
   });
 
   it('should call onBlur when the input is blurred', async () => {
+    // arrange
     const onBlur = jest.fn();
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" onBlur={onBlur} />);
-    const input = getByLabelText('Test Label');
+    render(<Input name="test-input" label="Test Label" onBlur={onBlur} />);
+    const input = screen.getByLabelText('Test Label');
+
+    // act
     fireEvent.blur(input);
+
+    // assert
     await waitFor(() => expect(onBlur).toHaveBeenCalledTimes(1));
   });
 
   it('should set the input type if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" type="password" />);
-    const input = getByLabelText('Test Label') as HTMLInputElement;
+    // arrange
+    render(<Input name="test-input" label="Test Label" type="password" />);
+    const input = screen.getByLabelText('Test Label') as HTMLInputElement;
+
+    // assert
     expect(input.type).toBe('password');
   });
 
   it('should set the input value if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" value="Test Value" onChange={jest.fn} />);
-    const input = getByLabelText('Test Label') as HTMLInputElement;
-    expect(input.value).toBe('Test Value');
-  });
+    // arrange
+    render(<Input name="test-input" label="Test Label" value="Test Value" onChange={jest.fn} />);
+    const input = screen.getByLabelText('Test Label') as HTMLInputElement;
 
-  it('should apply the className prop to the container div', () => {
-    const { container } = render(<Input name="test-input" className="test-class" />);
-    expect(container.firstChild).toHaveClass('test-class');
+    // assert
+    expect(input.value).toBe('Test Value');
   });
 
   it('should apply the isInvalid prop to the input element', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" isInvalid />);
-    const input = getByLabelText('Test Label');
+    // arrange
+    render(<Input name="test-input" label="Test Label" isInvalid />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
     expect(input).toHaveClass('is-invalid', 'is-invalid-lite');
   });
 
   it('should apply the disabled prop to the input element', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" disabled />);
-    const input = getByLabelText('Test Label');
+    // arrange
+    render(<Input name="test-input" label="Test Label" disabled />);
+
+    // assert
+    const input = screen.getByLabelText('Test Label');
     expect(input).toBeDisabled();
   });
 
   it('should set the input name attribute if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" />);
-    const input = getByLabelText('Test Label');
+    // arrange
+    render(<Input name="test-input" label="Test Label" />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
     expect(input).toHaveAttribute('name', 'test-input');
   });
 
   it('should set the input id attribute if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" />);
-    const input = getByLabelText('Test Label');
+    // arrange
+    render(<Input name="test-input" label="Test Label" />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
     expect(input).toHaveAttribute('id', 'test-input');
   });
 
   it('should set the input ref if provided', () => {
+    // arrange
     const ref = React.createRef<HTMLInputElement>();
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" ref={ref} />);
-    const input = getByLabelText('Test Label');
+    render(<Input name="test-input" label="Test Label" ref={ref} />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
     expect(input).toEqual(ref.current);
   });
 
   it('should set the input type attribute to "text" if not provided or if an invalid value is provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" />);
-    const input1 = getByLabelText('Test Label') as HTMLInputElement;
-    expect(input1.type).toBe('text');
+    // arrange
+    render(<Input name="test-input" label="Test Label" />);
+    const input = screen.getByLabelText('Test Label') as HTMLInputElement;
+
+    // assert
+    expect(input.type).toBe('text');
   });
 
   it('should set the input placeholder attribute if provided', () => {
-    const { getByLabelText } = render(<Input name="test-input" label="Test Label" placeholder="Test Placeholder" />);
-    const input = getByLabelText('Test Label');
+    // arrange
+    render(<Input name="test-input" label="Test Label" placeholder="Test Placeholder" />);
+    const input = screen.getByLabelText('Test Label');
+
+    // assert
     expect(input).toHaveAttribute('placeholder', 'Test Placeholder');
   });
 });

src/client/components/ui/NavBar/NavBar.test.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router';
 import React from 'react';
-import { render } from '../../../../../tests/test-utils';
+import { render, screen } from '../../../../../tests/test-utils';
 import { NavBar } from './NavBar';
 
 jest.mock('next/router', () => ({
@@ -15,36 +15,43 @@ describe('<NavBar />', () => {
   });
 
   it('should render the navbar items', () => {
-    const { getByText } = render(<NavBar isUpdateAvailable />);
-
-    expect(getByText('Dashboard')).toBeInTheDocument();
-    expect(getByText('My Apps')).toBeInTheDocument();
-    expect(getByText('App Store')).toBeInTheDocument();
-    expect(getByText('Settings')).toBeInTheDocument();
+    // arrange
+    render(<NavBar isUpdateAvailable />);
+
+    // assert
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    expect(screen.getByText('My Apps')).toBeInTheDocument();
+    expect(screen.getByText('App Store')).toBeInTheDocument();
+    expect(screen.getByText('Settings')).toBeInTheDocument();
   });
 
   it('should highlight the active navbar item', () => {
+    // arrange
     (useRouter as jest.Mock).mockImplementation(() => ({
       pathname: '/app-store',
     }));
+    render(<NavBar isUpdateAvailable />);
+    const activeItem = screen.getByRole('listitem', { name: 'App Store' });
+    const inactiveItem = screen.getByRole('listitem', { name: 'Dashboard' });
 
-    const { getByTestId } = render(<NavBar isUpdateAvailable />);
-    const activeItem = getByTestId('nav-item-app-store');
-    const inactiveItem = getByTestId('nav-item-settings');
-
-    expect(activeItem.classList.contains('active')).toBe(true);
-    expect(inactiveItem.classList.contains('active')).toBe(false);
+    // assert
+    expect(activeItem).toHaveClass('active');
+    expect(inactiveItem).not.toHaveClass('active');
   });
 
   it('should render the update available badge', () => {
-    const { getByText } = render(<NavBar isUpdateAvailable />);
+    // arrange
+    render(<NavBar isUpdateAvailable />);
 
-    expect(getByText('Update available')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Update available')).toBeInTheDocument();
   });
 
   it('should not render the update available badge', () => {
-    const { queryByText } = render(<NavBar isUpdateAvailable={false} />);
+    // arrange
+    render(<NavBar isUpdateAvailable={false} />);
 
-    expect(queryByText('Update available')).toBeNull();
+    // assert
+    expect(screen.queryByText('Update available')).not.toBeInTheDocument();
   });
 });

src/client/components/ui/NavBar/NavBar.tsx

@@ -17,7 +17,7 @@ export const NavBar: React.FC<IProps> = ({ isUpdateAvailable }) => {
     const itemClass = clsx('nav-item', { active: isActive, 'border-primary': isActive, 'border-bottom-wide': isActive });
 
     return (
-      <li data-testid={`nav-item-${name}`} className={itemClass}>
+      <li aria-label={title} data-testid={`nav-item-${name}`} className={itemClass}>
         <Link href={`/${name}`} className="nav-link" passHref>
           <span className="nav-link-icon d-md-none d-lg-inline-block">
             <IconComponent size={24} />

src/client/components/ui/Switch/Switch.test.tsx

@@ -5,53 +5,68 @@ import { fireEvent, render, screen } from '../../../../../tests/test-utils';
 
 describe('Switch', () => {
   it('renders the label', () => {
+    // arrange
     const label = 'Test Label';
-    const { getByText } = render(<Switch label={label} />);
+    render(<Switch label={label} />);
 
-    expect(getByText(label)).toBeInTheDocument();
+    // assert
+    expect(screen.getByRole('switch', { name: label })).toBeInTheDocument();
   });
 
   it('renders the className', () => {
+    // arrange
     const className = 'test-class';
-    const { container } = render(<Switch className={className} />);
-    const switchContainer = container.querySelector('.test-class');
+    render(<Switch className={className} />);
+    const switchContainer = screen.getByRole('switch').parentElement;
 
-    expect(switchContainer).toBeInTheDocument();
+    // assert
+    expect(switchContainer).toHaveClass(className);
   });
 
   it('renders the checked state', () => {
+    // arrange
     render(<Switch checked onChange={jest.fn} />);
     const checkbox = screen.getByRole('switch');
 
+    // assert
     expect(checkbox).toBeChecked();
   });
 
   it('triggers onChange event when clicked', () => {
+    // arrange
     const onChange = jest.fn();
     render(<Switch onCheckedChange={onChange} />);
     const checkbox = screen.getByRole('switch');
 
+    // act
     fireEvent.click(checkbox);
 
+    // assert
     expect(onChange).toHaveBeenCalled();
   });
 
   it('triggers onBlur event when blurred', () => {
+    // arrange
     const onBlur = jest.fn();
     render(<Switch onBlur={onBlur} />);
     const checkbox = screen.getByRole('switch');
 
+    // act
     fireEvent.blur(checkbox);
 
+    // assert
     expect(onBlur).toHaveBeenCalled();
   });
 
   it('should change the checked state when clicked', () => {
+    // arrange
     render(<Switch onChange={jest.fn} />);
     const checkbox = screen.getByRole('switch');
 
+    // act
     fireEvent.click(checkbox);
 
+    // assert
     expect(checkbox).toBeChecked();
   });
 });

src/client/components/ui/Toast/Toast.test.tsx

@@ -1,34 +1,43 @@
 import React from 'react';
-import { fireEvent, render } from '../../../../../tests/test-utils';
+import { fireEvent, screen, render } from '../../../../../tests/test-utils';
 import { Toast } from './Toast';
 
 describe('Toast', () => {
   it('renders the correct title', () => {
-    const { getByText } = render(<Toast id="toast-1" title="Test Title" onClose={jest.fn} status="info" />);
+    // arrange
+    render(<Toast id="toast-1" title="Test Title" onClose={jest.fn} status="info" />);
 
-    expect(getByText('Test Title')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
   });
 
   it('renders the correct message', () => {
-    const { getByText } = render(<Toast id="toast-1" title="Test Title" message="Test message" onClose={jest.fn} status="info" />);
+    // arrange
+    render(<Toast id="toast-1" title="Test Title" message="Test message" onClose={jest.fn} status="info" />);
 
-    expect(getByText('Test message')).toBeInTheDocument();
+    // assert
+    expect(screen.getByText('Test message')).toBeInTheDocument();
   });
 
   it('renders the correct status', () => {
-    const { container } = render(<Toast id="toast-1" title="Test Title" status="success" onClose={jest.fn} />);
-    const toastElement = container.querySelector('.tipi-toast');
+    // arrange
+    render(<Toast id="toast-1" title="Test Title" status="success" onClose={jest.fn} />);
+    const toastElement = screen.getByRole('alert');
 
+    // assert
     expect(toastElement).toHaveClass('alert-success');
   });
 
   it('calls the correct function when the close button is clicked', () => {
+    // arrange
     const onCloseMock = jest.fn();
-    const { getByLabelText } = render(<Toast id="toast-1" title="Test Title" onClose={onCloseMock} status="info" />);
-    const closeButton = getByLabelText('close');
+    render(<Toast id="toast-1" title="Test Title" onClose={onCloseMock} status="info" />);
+    const closeButton = screen.getByRole('button', { name: 'close' });
 
+    // act
     fireEvent.click(closeButton);
 
+    // assert
     expect(onCloseMock).toHaveBeenCalled();
   });
 });

src/client/modules/AppStore/pages/AppStorePage/AppStorePage.test.tsx

@@ -13,8 +13,8 @@ describe('Test: AppStorePage', () => {
     // Assert
     await waitFor(() => {
       expect(screen.getByText('An error occured')).toBeInTheDocument();
-      expect(screen.getByText('test error')).toBeInTheDocument();
     });
+    expect(screen.getByText('test error')).toBeInTheDocument();
   });
 
   it('should render', async () => {

src/client/modules/Apps/components/InstallForm/InstallForm.test.tsx

@@ -69,13 +69,12 @@ describe('Test: InstallForm', () => {
 
     await waitFor(() => {
       expect(screen.getByText('test-field is required')).toBeInTheDocument();
-      expect(screen.getByText('test-select is required')).toBeInTheDocument();
     });
+    expect(screen.getByText('test-select is required')).toBeInTheDocument();
   });
 
   it('should pre-fill fields if initialValues are provided', () => {
     const selectValue = faker.random.word();
-    const booleanValue = faker.datatype.boolean();
 
     const formFields: FormField[] = [
       { env_variable: 'test-env', label: 'test-field', type: 'text', required: true },
@@ -94,11 +93,11 @@ describe('Test: InstallForm', () => {
 
     const onSubmit = jest.fn();
 
-    render(<InstallForm formFields={formFields} onSubmit={onSubmit} initalValues={{ 'test-env': 'test', 'test-select': selectValue, 'test-boolean': booleanValue }} />);
+    render(<InstallForm formFields={formFields} onSubmit={onSubmit} initalValues={{ 'test-env': 'test', 'test-select': selectValue, 'test-boolean': true }} />);
 
     expect(screen.getByRole('textbox', { name: 'test-env' })).toHaveValue('test');
     expect(screen.getByRole('combobox', { name: 'test-select' })).toHaveTextContent('Should appear');
-    expect(screen.getByRole('switch', { name: 'test-boolean' })).toHaveAttribute('aria-checked', booleanValue.toString());
+    expect(screen.getByRole('switch', { name: 'test-boolean' })).toBeChecked();
   });
 
   it('should render expose switch when app is exposable', () => {

src/client/modules/Auth/components/ResetPasswordForm/ResetPasswordForm.test.tsx

@@ -19,7 +19,7 @@ describe('ResetPasswordForm', () => {
     fireEvent.click(screen.getByText('Reset password'));
 
     // Assert
-    await waitFor(() => expect(screen.getByText('Password must be at least 8 characters')).toBeInTheDocument());
+    await screen.findByText('Password must be at least 8 characters');
   });
 
   it('should display an error if the passwords do not match', async () => {
@@ -32,7 +32,7 @@ describe('ResetPasswordForm', () => {
     fireEvent.click(screen.getByText('Reset password'));
 
     // Assert
-    await waitFor(() => expect(screen.getByText('Passwords do not match')).toBeInTheDocument());
+    await screen.findByText('Passwords do not match');
   });
 
   it('should call the onSubmit function when the form is submitted', async () => {

src/client/modules/Auth/containers/ResetPasswordContainer/ResetPasswordContainer.test.tsx

@@ -47,9 +47,9 @@ describe('ResetPasswordContainer', () => {
     // Assert
     await waitFor(() => {
       expect(screen.getByText('Password reset')).toBeInTheDocument();
-      expect(screen.getByText(`Your password has been reset. You can now login with your new password. And your email ${email}`)).toBeInTheDocument();
-      expect(screen.getByText('Back to login')).toBeInTheDocument();
     });
+    expect(screen.getByText(`Your password has been reset. You can now login with your new password. And your email ${email}`)).toBeInTheDocument();
+    expect(screen.getByText('Back to login')).toBeInTheDocument();
   });
 
   it('should show error toast if reset password mutation fails', async () => {

src/client/modules/Settings/components/OtpForm/OptForm.test.tsx

@@ -153,9 +153,9 @@ describe('<OtpForm />', () => {
     // assert
     await waitFor(() => {
       expect(screen.getByText('Scan this QR code with your authenticator app.')).toBeInTheDocument();
-      expect(screen.getByRole('textbox', { name: 'secret key' })).toHaveValue('test');
-      expect(screen.getByRole('button', { name: 'Enable 2FA' })).toBeDisabled();
     });
+    expect(screen.getByRole('textbox', { name: 'secret key' })).toHaveValue('test');
+    expect(screen.getByRole('button', { name: 'Enable 2FA' })).toBeDisabled();
   });
 
   it('should show error toast if submitted totp code is invalid', async () => {

src/client/modules/Settings/components/SettingsForm/SettingsForm.test.tsx

@@ -24,11 +24,11 @@ describe('Test: SettingsForm', () => {
     // assert
     await waitFor(() => {
       expect(screen.getByDisplayValue(initialValues.dnsIp)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(initialValues.domain)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(initialValues.internalIp)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(initialValues.appsRepoUrl)).toBeInTheDocument();
-      expect(screen.getByDisplayValue(initialValues.storagePath)).toBeInTheDocument();
     });
+    expect(screen.getByDisplayValue(initialValues.domain)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(initialValues.internalIp)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(initialValues.appsRepoUrl)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(initialValues.storagePath)).toBeInTheDocument();
   });
 
   it('should put submit errors in the fields', async () => {
@@ -45,11 +45,11 @@ describe('Test: SettingsForm', () => {
     // assert
     await waitFor(() => {
       expect(screen.getByText(submitErrors.dnsIp)).toBeInTheDocument();
-      expect(screen.getByText(submitErrors.domain)).toBeInTheDocument();
-      expect(screen.getByText(submitErrors.internalIp)).toBeInTheDocument();
-      expect(screen.getByText(submitErrors.appsRepoUrl)).toBeInTheDocument();
-      expect(screen.getByText(submitErrors.storagePath)).toBeInTheDocument();
     });
+    expect(screen.getByText(submitErrors.domain)).toBeInTheDocument();
+    expect(screen.getByText(submitErrors.internalIp)).toBeInTheDocument();
+    expect(screen.getByText(submitErrors.appsRepoUrl)).toBeInTheDocument();
+    expect(screen.getByText(submitErrors.storagePath)).toBeInTheDocument();
   });
 
   it('should correctly validate the form', async () => {
@@ -71,9 +71,9 @@ describe('Test: SettingsForm', () => {
     // assert
     await waitFor(() => {
       expect(screen.getAllByText('Invalid IP address')).toHaveLength(2);
-      expect(screen.getByText('Invalid domain')).toBeInTheDocument();
-      expect(screen.getByText('Invalid URL')).toBeInTheDocument();
     });
+    expect(screen.getByText('Invalid domain')).toBeInTheDocument();
+    expect(screen.getByText('Invalid URL')).toBeInTheDocument();
   });
 
   it('should call onSubmit when the form is submitted', async () => {

src/client/modules/Settings/pages/SettingsPage/SettingsPage.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, screen, waitFor } from '../../../../../../tests/test-utils';
+import { render, screen } from '../../../../../../tests/test-utils';
 import { SettingsPage } from './SettingsPage';
 
 describe('Test: SettingsPage', () => {
   it('should render', async () => {
     render(<SettingsPage />);
 
-    await waitFor(() => expect(screen.getByTestId('settings-layout')).toBeInTheDocument());
+    await screen.findByTestId('settings-layout');
   });
 });