chore: update deps 2024-03-12 (#1570)

* chore: update 1

* chore: update @types/*

* chore: update react native

* chore: update eslint & typescript

* chore: fix lint

* chore: upgrade release it

* chore: reformat

* chore: disable flow validation

Author: mdjastrzebski

.github/workflows/main.yml

@@ -44,20 +44,6 @@ jobs:
       - name: Typecheck
         run: yarn typecheck
 
-  flow:
-    needs: [install-cache-deps]
-    runs-on: ubuntu-latest
-    name: Flow
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js and deps
-        uses: ./.github/actions/setup-deps
-
-      - name: Flow
-        run: yarn flow
-
   test:
     needs: [install-cache-deps]
     runs-on: ubuntu-latest

README.md

@@ -109,8 +109,8 @@ test('form submits two answers', async () => {
   await user.press(screen.getByRole('button', { name: 'Submit' }));
 
   expect(onSubmit).toHaveBeenCalledWith({
-    '1': { q: 'q1', a: 'a1' },
-    '2': { q: 'q2', a: 'a2' },
+    1: { q: 'q1', a: 'a1' },
+    2: { q: 'q2', a: 'a2' },
   });
 });
 ```
@@ -143,7 +143,6 @@ The [public API](https://callstack.github.io/react-native-testing-library/docs/a
 
 Check out our list of [Community Resources about RNTL](https://callstack.github.io/react-native-testing-library/docs/community-resources).
 
-
 ## Made with ❤️ at Callstack
 
 React Native Testing Library is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. [Callstack](https://callstack.com) is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!

examples/basic/components/LoginForm.tsx

@@ -82,7 +82,7 @@ async function authUser(username: string, password: string): Promise<string | nu
     setTimeout(() => {
       const hasValidCredentials = username === 'admin' && password === 'admin1';
       resolve(hasValidCredentials ? username : null);
-    }, 250)
+    }, 250),
   );
 }
 

examples/redux/components/AddTodo.test.js

@@ -22,6 +22,6 @@ test('adds a new todo to redux store when submitting form', () => {
         text: textToEnter,
         date: expect.any(Date),
       }),
-    ])
+    ]),
   );
 });

package.json

@@ -69,35 +69,33 @@
     }
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.4",
-    "@babel/core": "^7.23.3",
+    "@babel/cli": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-transform-flow-strip-types": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-flow": "^7.23.3",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-flow": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@callstack/eslint-config": "^14.1.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@relmify/jest-serializer-strip-ansi": "^1.0.2",
-    "@types/jest": "^29.5.10",
-    "@types/react": "^18.2.38",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.65",
     "@types/react-test-renderer": "^18.0.7",
     "babel-jest": "^29.7.0",
-    "dedent": "^1.5.1",
     "del-cli": "^5.1.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-prettier": "^5.1.2",
+    "eslint-plugin-prettier": "^4.2.1",
     "flow-bin": "~0.170.0",
-    "flow-copy-source": "^2.0.9",
     "jest": "^29.7.0",
-    "prettier": "^3.1.1",
+    "prettier": "^2.8.8",
     "react": "18.2.0",
-    "react-native": "0.72.7",
+    "react-native": "0.73.6",
     "react-test-renderer": "18.2.0",
-    "release-it": "^17.0.1",
+    "release-it": "^17.1.1",
     "strip-ansi": "^6.0.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.4.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

.prettierrc.js renamed to prettier.config.js

@@ -1,5 +1,5 @@
 // added for Jest inline snapshots to not use default Prettier config
 module.exports = {
   singleQuote: true,
-  trailingComma: 'es5',
+  trailingComma: 'all',
 };

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

@@ -26,7 +26,7 @@ test('should fire only non-touch-related events on non-editable TextInput', () =
       onChangeText={onChangeText}
       onSubmitEditing={onSubmitEditing}
       onLayout={onLayout}
-    />
+    />,
   );
 
   const subject = screen.getByTestId('subject');
@@ -57,7 +57,7 @@ test('should fire only non-touch-related events on non-editable TextInput with n
       onLayout={onLayout}
     >
       <Text>Nested Text</Text>
-    </TextInput>
+    </TextInput>,
   );
 
   const subject = screen.getByText('Nested Text');
@@ -106,7 +106,7 @@ test('should fire only non-touch-related events on non-editable wrapped TextInpu
       onChangeText={onChangeText}
       onSubmitEditing={onSubmitEditing}
       onLayout={onLayout}
-    />
+    />,
   );
 
   const subject = screen.getByTestId('subject');
@@ -138,7 +138,7 @@ test('should fire only non-touch-related events on non-editable double wrapped T
       onChangeText={onChangeText}
       onSubmitEditing={onSubmitEditing}
       onLayout={onLayout}
-    />
+    />,
   );
 
   const subject = screen.getByTestId('subject');

src/__tests__/fire-event.test.tsx

@@ -78,7 +78,7 @@ describe('fireEvent', () => {
     const onPressMock = jest.fn();
     render(
       // TODO: this functionality is buggy, i.e. it will fail if we wrap this component with a View.
-      <WithoutEventComponent onPress={onPressMock} />
+      <WithoutEventComponent onPress={onPressMock} />,
     );
     fireEvent(screen.getByText('Without event'), 'press');
     expect(onPressMock).not.toHaveBeenCalled();
@@ -91,7 +91,7 @@ describe('fireEvent', () => {
     render(
       <View>
         <CustomEventComponent onCustomEvent={handlerMock} />
-      </View>
+      </View>,
     );
 
     fireEvent(screen.getByText('Custom event component'), 'customEvent', EVENT_DATA);
@@ -129,7 +129,7 @@ test('fireEvent.scroll', () => {
   render(
     <ScrollView onScroll={onScrollMock}>
       <Text>XD</Text>
-    </ScrollView>
+    </ScrollView>,
   );
 
   fireEvent.scroll(screen.getByText('XD'), eventData);
@@ -144,7 +144,7 @@ test('fireEvent.changeText', () => {
   render(
     <View>
       <TextInput placeholder="Customer placeholder" onChangeText={onChangeTextMock} />
-    </View>
+    </View>,
   );
 
   fireEvent.changeText(screen.getByPlaceholderText('Customer placeholder'), CHANGE_TEXT);
@@ -179,7 +179,7 @@ test('should not fire on disabled TouchableOpacity', () => {
       <TouchableOpacity onPress={handlePress} disabled={true}>
         <Text>Trigger</Text>
       </TouchableOpacity>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -193,7 +193,7 @@ test('should not fire on disabled Pressable', () => {
       <Pressable onPress={handlePress} disabled={true}>
         <Text>Trigger</Text>
       </Pressable>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -207,7 +207,7 @@ test('should not fire inside View with pointerEvents="none"', () => {
       <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -222,7 +222,7 @@ test('should not fire inside View with pointerEvents="box-only"', () => {
       <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -237,7 +237,7 @@ test('should fire inside View with pointerEvents="box-none"', () => {
       <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -252,7 +252,7 @@ test('should fire inside View with pointerEvents="auto"', () => {
       <Pressable onPress={onPress}>
         <Text>Trigger</Text>
       </Pressable>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -269,7 +269,7 @@ test('should not fire deeply inside View with pointerEvents="box-only"', () => {
           <Text>Trigger</Text>
         </Pressable>
       </View>
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));
@@ -311,7 +311,7 @@ test('should pass event up on disabled TouchableOpacity', () => {
       <TouchableOpacity onPress={handleInnerPress} disabled={true}>
         <Text>Inner Trigger</Text>
       </TouchableOpacity>
-    </TouchableOpacity>
+    </TouchableOpacity>,
   );
 
   fireEvent.press(screen.getByText('Inner Trigger'));
@@ -327,7 +327,7 @@ test('should pass event up on disabled Pressable', () => {
       <Pressable onPress={handleInnerPress} disabled={true}>
         <Text>Inner Trigger</Text>
       </Pressable>
-    </Pressable>
+    </Pressable>,
   );
 
   fireEvent.press(screen.getByText('Inner Trigger'));
@@ -376,7 +376,7 @@ test('is not fooled by non-responder wrapping host elements', () => {
   render(
     <View>
       <TestChildTouchableComponent onPress={handlePress} someProp={true} />
-    </View>
+    </View>,
   );
 
   fireEvent.press(screen.getByText('Trigger'));

src/__tests__/host-component-names.test.tsx

@@ -53,7 +53,7 @@ describe('getHostComponentNames', () => {
     expect(() =>
       act(() => {
         getHostComponentNames();
-      })
+      }),
     ).not.toThrow();
   });
 });

src/__tests__/host-text-nesting.test.tsx

@@ -28,7 +28,7 @@ describe('nested text handling', () => {
         <Text testID="child" accessibilityRole="header">
           About
         </Text>
-      </Text>
+      </Text>,
     );
 
     expect(screen.getByRole('header', { name: 'About' }).props.testID).toBe('child');
@@ -40,7 +40,7 @@ describe('nested text handling', () => {
         <Pressable testID="pressable" accessibilityRole="button">
           <Text>Save</Text>
         </Pressable>
-      </View>
+      </View>,
     );
 
     expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
@@ -54,7 +54,7 @@ describe('nested text handling', () => {
             <Text>Save</Text>
           </View>
         </Pressable>
-      </View>
+      </View>,
     );
 
     expect(screen.getByRole('button', { name: 'Save' }).props.testID).toBe('pressable');
@@ -64,7 +64,7 @@ describe('nested text handling', () => {
     render(
       <Pressable testID="pressable" accessibilityRole="button">
         <Text testID="text">Save</Text>
-      </Pressable>
+      </Pressable>,
     );
 
     expect(screen.getByText('Save').props.testID).toBe('text');
@@ -76,7 +76,7 @@ describe('nested text handling', () => {
         <View>
           <Text testID="text">Save</Text>
         </View>
-      </Pressable>
+      </Pressable>,
     );
 
     expect(screen.getByText('Save').props.testID).toBe('text');