chore: tweak docs and examples to match recommended practices 2024 (use screen object for queries) (#1561)

* chore: tweak docs and examples to match modern usage of lib.

Use screen object for queries (pt.1)

Use screen object for queries (pt.2)

update render docs to modern screen API and fix lint

* refactor: code review tweaks

---------

Co-authored-by: Maciej Jastrzębski <mdjastrzebski@gmail.com>

Author: vanGalilea

README.md

@@ -88,21 +88,29 @@ flow-typed install react-test-renderer
 import { render, screen, fireEvent } from '@testing-library/react-native';
 import { QuestionsBoard } from '../QuestionsBoard';
 
-test('form submits two answers', () => {
-  const allQuestions = ['q1', 'q2'];
-  const mockFn = jest.fn();
+// It is recommended to use userEvent with fake timers
+// Some events involve duration so your tests may take a long time to run.
+jest.useFakeTimers();
 
-  render(<QuestionsBoard questions={allQuestions} onSubmit={mockFn} />);
+test('form submits two answers', async () => {
+  const questions = ['q1', 'q2'];
+  const onSubmit = jest.fn();
+
+  const user = userEvent.setup();
+  render(<QuestionsBoard questions={questions} onSubmit={onSubmit} />);
 
   const answerInputs = screen.getAllByLabelText('answer input');
 
-  fireEvent.changeText(answerInputs[0], 'a1');
-  fireEvent.changeText(answerInputs[1], 'a2');
-  fireEvent.press(screen.getByText('Submit'));
+  // simulates the user focusing on TextInput and typing text one char at a time
+  await user.type(answerInputs[0], 'a1');
+  await user.type(answerInputs[1], 'a2');
+
+  // simulates the user pressing on any pressable element
+  await user.press(screen.getByRole('button', { name: 'Submit' }));
 
-  expect(mockFn).toBeCalledWith({
-    1: { q: 'q1', a: 'a1' },
-    2: { q: 'q2', a: 'a2' },
+  expect(onSubmit).toHaveBeenCalledWith({
+    '1': { q: 'q1', a: 'a1' },
+    '2': { q: 'q2', a: 'a2' },
   });
 });
 ```

src/__tests__/__snapshots__/render-debug.test.tsx.snap

@@ -58,6 +58,7 @@ exports[`debug 1`] = `
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
+    role="button"
   >
     <Text>
       Change freshness!
@@ -137,6 +138,7 @@ exports[`debug changing component: bananaFresh button message should now be "fre
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
+    role="button"
   >
     <Text>
       Change freshness!
@@ -343,6 +345,7 @@ exports[`debug: another custom message 1`] = `
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
+    role="button"
   >
     <Text>
       Change freshness!
@@ -394,7 +397,6 @@ exports[`debug: shallow 1`] = `
   />
   <MyButton
     onPress={[Function changeFresh]}
-    type="primary"
   >
     Change freshness!
   </MyButton>
@@ -446,7 +448,6 @@ exports[`debug: shallow with message 1`] = `
   />
   <MyButton
     onPress={[Function changeFresh]}
-    type="primary"
   >
     Change freshness!
   </MyButton>
@@ -526,6 +527,7 @@ exports[`debug: with message 1`] = `
     onResponderTerminate={[Function onResponderTerminate]}
     onResponderTerminationRequest={[Function onResponderTerminationRequest]}
     onStartShouldSetResponder={[Function onStartShouldSetResponder]}
+    role="button"
   >
     <Text>
       Change freshness!

src/__tests__/act.test.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { Text } from 'react-native';
-import act from '../act';
-import render from '../render';
-import fireEvent from '../fire-event';
+import { act, fireEvent, render, screen } from '../';
 
 type UseEffectProps = { callback(): void };
 const UseEffect = ({ callback }: UseEffectProps) => {
@@ -26,15 +24,15 @@ test('render should trigger useEffect', () => {
 
 test('update should trigger useEffect', () => {
   const effectCallback = jest.fn();
-  const { update } = render(<UseEffect callback={effectCallback} />);
-  update(<UseEffect callback={effectCallback} />);
+  render(<UseEffect callback={effectCallback} />);
+  screen.update(<UseEffect callback={effectCallback} />);
 
   expect(effectCallback).toHaveBeenCalledTimes(2);
 });
 
 test('fireEvent should trigger useState', () => {
-  const { getByText } = render(<Counter />);
-  const counter = getByText(/Total count/i);
+  render(<Counter />);
+  const counter = screen.getByText(/Total count/i);
 
   expect(counter.props.children).toEqual('Total count: 0');
   fireEvent.press(counter);

src/__tests__/fire-event-textInput.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, TextInput, TextInputProps } from 'react-native';
-import { render, fireEvent } from '..';
+import { render, fireEvent, screen } from '..';
 
 function WrappedTextInput(props: TextInputProps) {
   return <TextInput {...props} />;
@@ -18,7 +18,7 @@ test('should fire only non-touch-related events on non-editable TextInput', () =
   const onSubmitEditing = jest.fn();
   const onLayout = jest.fn();
 
-  const view = render(
+  render(
     <TextInput
       editable={false}
       testID="subject"
@@ -29,7 +29,7 @@ test('should fire only non-touch-related events on non-editable TextInput', () =
     />
   );
 
-  const subject = view.getByTestId('subject');
+  const subject = screen.getByTestId('subject');
   fireEvent(subject, 'focus');
   fireEvent.changeText(subject, 'Text');
   fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
@@ -47,7 +47,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
   const onSubmitEditing = jest.fn();
   const onLayout = jest.fn();
 
-  const view = render(
+  render(
     <TextInput
       editable={false}
       testID="subject"
@@ -60,7 +60,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
     </TextInput>
   );
 
-  const subject = view.getByText('Nested Text');
+  const subject = screen.getByText('Nested Text');
   fireEvent(subject, 'focus');
   fireEvent(subject, 'onFocus');
   fireEvent.changeText(subject, 'Text');
@@ -98,7 +98,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
   const onSubmitEditing = jest.fn();
   const onLayout = jest.fn();
 
-  const view = render(
+  render(
     <WrappedTextInput
       editable={false}
       testID="subject"
@@ -109,7 +109,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
     />
   );
 
-  const subject = view.getByTestId('subject');
+  const subject = screen.getByTestId('subject');
   fireEvent(subject, 'focus');
   fireEvent.changeText(subject, 'Text');
   fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });
@@ -130,7 +130,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
   const onSubmitEditing = jest.fn();
   const onLayout = jest.fn();
 
-  const view = render(
+  render(
     <DoubleWrappedTextInput
       editable={false}
       testID="subject"
@@ -141,7 +141,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
     />
   );
 
-  const subject = view.getByTestId('subject');
+  const subject = screen.getByTestId('subject');
   fireEvent(subject, 'focus');
   fireEvent.changeText(subject, 'Text');
   fireEvent(subject, 'submitEditing', { nativeEvent: { text: 'Text' } });