chore: update basic example with User Event (#1438)

* chore: update basic example with User Event

* chore: add fake timers

Author: mdjastrzebski

examples/basic/__tests__/App.test.tsx

@@ -1,7 +1,14 @@
 import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react-native';
+import {
+  render,
+  screen,
+  fireEvent,
+  userEvent,
+} from '@testing-library/react-native';
 import App from '../App';
 
+jest.useFakeTimers();
+
 /**
  * A good place to start is having a tests that your component renders correctly.
  */
@@ -22,6 +29,9 @@ test('renders correctly', () => {
  * his point of view.
  */
 test('User can sign in successully with correct credentials', async () => {
+  // Setup User Event instance for realistic simulation of user interaction.
+  const user = userEvent.setup();
+
   // Idiom: no need to capture render output, as we will use `screen` for queries.
   render(<App />);
 
@@ -32,11 +42,11 @@ test('User can sign in successully with correct credentials', async () => {
   ).toBeOnTheScreen();
 
   // Hint: we can use `getByLabelText` to find our text inputs using their labels.
-  fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
-  fireEvent.changeText(screen.getByLabelText('Password'), 'admin1');
+  await user.type(screen.getByLabelText('Username'), 'admin');
+  await user.type(screen.getByLabelText('Password'), 'admin1');
 
   // Hint: we can use `getByRole` to find our button with given text.
-  fireEvent.press(screen.getByRole('button', { name: 'Sign In' }));
+  await user.press(screen.getByRole('button', { name: 'Sign In' }));
 
   // Idiom: since pressing button triggers async operation we need to use `findBy*` query to wait
   // for the action to complete.
@@ -67,15 +77,16 @@ test('User can sign in successully with correct credentials', async () => {
  * Note: that some times you will have to resort to `getByTestId`, but treat it as a last resort.
  */
 test('User will see errors for incorrect credentials', async () => {
+  const user = userEvent.setup();
   render(<App />);
 
   expect(
     screen.getByRole('header', { name: 'Sign in to Example App' })
   ).toBeOnTheScreen();
 
-  fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
-  fireEvent.changeText(screen.getByLabelText('Password'), 'qwerty123');
-  fireEvent.press(screen.getByRole('button', { name: 'Sign In' }));
+  await user.type(screen.getByLabelText('Username'), 'admin');
+  await user.type(screen.getByLabelText('Password'), 'qwerty123');
+  await user.press(screen.getByRole('button', { name: 'Sign In' }));
 
   // Hint: you can use custom Jest Native matcher to check text content.
   expect(await screen.findByRole('alert')).toHaveTextContent(
@@ -93,22 +104,29 @@ test('User will see errors for incorrect credentials', async () => {
  * Do not be afraid to write longer test scenarios, with repeating act and assert statements.
  */
 test('User can sign in after incorrect attempt', async () => {
+  const user = userEvent.setup();
   render(<App />);
 
   expect(
     screen.getByRole('header', { name: 'Sign in to Example App' })
   ).toBeOnTheScreen();
 
-  fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
-  fireEvent.changeText(screen.getByLabelText('Password'), 'qwerty123');
-  fireEvent.press(screen.getByRole('button', { name: 'Sign In' }));
+  const usernameInput = screen.getByLabelText('Username');
+  const passwordInput = screen.getByLabelText('Password');
+
+  await user.type(usernameInput, 'admin');
+  await user.type(passwordInput, 'qwerty123');
+  await user.press(screen.getByRole('button', { name: 'Sign In' }));
 
   expect(await screen.findByRole('alert')).toHaveTextContent(
     'Incorrect username or password'
   );
 
-  fireEvent.changeText(screen.getByLabelText('Password'), 'admin1');
-  fireEvent.press(screen.getByRole('button', { name: 'Sign In' }));
+  // Workaround for clearing TextInput, clear() function will be added soon.
+  fireEvent.changeText(passwordInput, '');
+
+  await user.type(passwordInput, 'admin1');
+  await user.press(screen.getByRole('button', { name: 'Sign In' }));
 
   expect(await screen.findByText('Welcome admin!')).toBeOnTheScreen();
   expect(

examples/basic/package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^12.1.3",
+    "@testing-library/react-native": "^12.2.0",
     "@types/react": "~18.2.14",
     "jest": "^29.3.0",
     "react-test-renderer": "18.2.0",