feat: update tests and components to use the user event API

Author: yjose

package.json

@@ -89,7 +89,7 @@
     "@dev-plugins/react-query": "^0.0.7",
     "@expo/config": "~9.0.2",
     "@testing-library/jest-dom": "^6.5.0",
-    "@testing-library/react-native": "^12.6.0",
+    "@testing-library/react-native": "^12.7.2",
     "@types/i18n-js": "^3.8.9",
     "@types/jest": "^29.5.12",
     "@types/lodash.memoize": "^4.1.9",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { cleanup, fireEvent, render, screen, waitFor } from '@/core/test-utils';
+import { cleanup, screen, setup, waitFor } from '@/core/test-utils';
 
 import type { LoginFormProps } from './login-form';
 import { LoginForm } from './login-form';
@@ -11,55 +11,55 @@ const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();
 
 describe('LoginForm Form ', () => {
   it('renders correctly', async () => {
-    render(<LoginForm />);
+    setup(<LoginForm />);
     expect(await screen.findByText(/Sign in/i)).toBeOnTheScreen();
   });
 
   it('should display required error when values are empty', async () => {
-    render(<LoginForm />);
+    const { user } = setup(<LoginForm />);
 
     const button = screen.getByTestId('login-button');
     expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
-    fireEvent.press(button);
+    await user.press(button);
     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 () => {
-    render(<LoginForm />);
+    const { user } = setup(<LoginForm />);
 
     const button = screen.getByTestId('login-button');
     const emailInput = screen.getByTestId('email-input');
     const passwordInput = screen.getByTestId('password-input');
 
-    fireEvent.changeText(emailInput, 'yyyyy');
-    fireEvent.changeText(passwordInput, 'test');
-    fireEvent.press(button);
+    await user.type(emailInput, 'yyyyy');
+    await user.type(passwordInput, 'test');
+    await user.press(button);
 
-    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
     expect(await screen.findByText(/Invalid Email Format/i)).toBeOnTheScreen();
+    expect(screen.queryByText(/Email is required/i)).not.toBeOnTheScreen();
   });
 
   it('Should call LoginForm with correct values when values are valid', async () => {
-    render(<LoginForm onSubmit={onSubmitMock} />);
+    const { user } = setup(<LoginForm onSubmit={onSubmitMock} />);
 
     const button = screen.getByTestId('login-button');
     const emailInput = screen.getByTestId('email-input');
     const passwordInput = screen.getByTestId('password-input');
 
-    fireEvent.changeText(emailInput, '[email protected]');
-    fireEvent.changeText(passwordInput, 'password');
-    fireEvent.press(button);
+    await user.type(emailInput, '[email protected]');
+    await user.type(passwordInput, 'password');
+    await user.press(button);
     await waitFor(() => {
       expect(onSubmitMock).toHaveBeenCalledTimes(1);
     });
-    // undefined because we don't use second argument of the  SubmitHandler
+    // expect.objectContaining({}) because we don't want to test the target event we are receiving from the onSubmit function
     expect(onSubmitMock).toHaveBeenCalledWith(
       {
         email: '[email protected]',
         password: 'password',
       },
-      undefined
+      expect.objectContaining({}),
     );
   });
 });

src/components/login-form.test.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import { cleanup, fireEvent, render, screen } from '@/core/test-utils';
+import { cleanup, render, screen, setup } from '@/core/test-utils';
 
 import { Button } from './button';
 
@@ -17,7 +17,7 @@ describe('Button component ', () => {
     render(
       <Button testID="button">
         <Text> Custom child </Text>
-      </Button>
+      </Button>,
     );
     expect(screen.getByText('Custom child')).toBeOnTheScreen();
   });
@@ -31,48 +31,48 @@ describe('Button component ', () => {
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
   });
-  it('should call onClick handler when clicked', () => {
+  it('should call onClick handler when clicked', async () => {
     const onClick = jest.fn();
-    render(
-      <Button testID="button" label="Click the button" onPress={onClick} />
+    const { user } = setup(
+      <Button testID="button" label="Click the button" onPress={onClick} />,
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
-    fireEvent.press(screen.getByTestId('button'));
+    await user.press(screen.getByTestId('button'));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
-  it('should be disabled when loading', () => {
+  it('should be disabled when loading', async () => {
     const onClick = jest.fn();
-    render(
+    const { user } = setup(
       <Button
         testID="button"
         loading={true}
         label="Click the button"
         onPress={onClick}
-      />
+      />,
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
     expect(screen.getByTestId('button-activity-indicator')).toBeOnTheScreen();
     expect(screen.getByTestId('button')).toBeDisabled();
-    fireEvent.press(screen.getByTestId('button'));
+    await user.press(screen.getByTestId('button'));
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   it('should be disabled when disabled prop is true', () => {
     render(<Button testID="button" disabled={true} />);
     expect(screen.getByTestId('button')).toBeDisabled();
   });
-  it("shouldn't call onClick when disabled", () => {
+  it("shouldn't call onClick when disabled", async () => {
     const onClick = jest.fn();
-    render(
+    const { user } = setup(
       <Button
         testID="button"
         label="Click the button"
         disabled={true}
         onPress={onClick}
         variant="secondary"
-      />
+      />,
     );
     expect(screen.getByTestId('button')).toBeOnTheScreen();
-    fireEvent.press(screen.getByTestId('button'));
+    await user.press(screen.getByTestId('button'));
 
     expect(screen.getByTestId('button')).toBeDisabled();