upgrade react-native 0.79.2; update tests

Author: testshallpass

DropdownAlert.tsx

@@ -158,10 +158,10 @@ export type DropdownAlertProps = {
   activeStatusBarStyle?: StatusBarStyle;
   // StatusBarStyle when alert is dismissed and updateStatusBar must be true
   inactiveStatusBarStyle?: StatusBarStyle;
-  renderImage?: (data: DropdownAlertData) => JSX.Element;
-  renderCancel?: (data: DropdownAlertData, onCancel: () => void) => JSX.Element;
-  renderTitle?: (data: DropdownAlertData) => JSX.Element;
-  renderMessage?: (data: DropdownAlertData) => JSX.Element;
+  renderImage?: (data: DropdownAlertData) => React.JSX.Element;
+  renderCancel?: (data: DropdownAlertData, onCancel: () => void) => React.JSX.Element;
+  renderTitle?: (data: DropdownAlertData) => React.JSX.Element;
+  renderMessage?: (data: DropdownAlertData) => React.JSX.Element;
   titleTextProps?: TextProps;
   messageTextProps?: TextProps;
   animatedViewProps?: ViewProps;

__tests__/DropdownAlert.test.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
-import {Image, LayoutChangeEvent, Pressable, Text, View} from 'react-native';
-import '@testing-library/jest-native/extend-expect';
+import {
+  Image,
+  LayoutChangeEvent,
+  Platform,
+  Pressable,
+  StatusBar,
+  Text,
+  View,
+} from 'react-native';
 import {
   render,
   act,
@@ -131,7 +138,7 @@ test('onDismissProgrammatic', async () => {
     />,
   );
   expect(component).toBeDefined();
-  await act(() => {
+  act(() => {
     alert({
       type: 'custom',
       title: DropDownAlertTestID.Title,
@@ -148,7 +155,7 @@ test('onDismissProgrammatic', async () => {
     dismiss();
     await delay();
   });
-  expect(_onDismissProgrammatic).toBeCalled();
+  expect(_onDismissProgrammatic).toHaveBeenCalled();
 }, 2000);
 
 test('onDismissPress', async () => {
@@ -180,7 +187,7 @@ test('onDismissPress', async () => {
     fireEvent.press(button);
     await delay();
   });
-  expect(_onDismissPress).toBeCalled();
+  expect(_onDismissPress).toHaveBeenCalled();
 }, 2000);
 
 test('onDismissCancel', async () => {
@@ -211,7 +218,7 @@ test('onDismissCancel', async () => {
     expect(cancelImage).toBeDefined();
     await delay();
   });
-  expect(_onDismissCancel).toBeCalled();
+  expect(_onDismissCancel).toHaveBeenCalled();
 }, 5500);
 
 test('renderImage, renderTitle, renderMessage and renderCancel props', async () => {
@@ -281,16 +288,30 @@ test('Animated.View onLayout function', async () => {
     <DropdownAlert alert={func => (alert = func)} dismissInterval={0} />,
   );
   expect(component).toBeDefined();
-  await act(() => {
+  act(() => {
     alert({type: DropdownAlertType.Warn, title: 'title', message: 'message'});
   });
   const height = 150;
   const animatedView = screen.getByTestId(DropDownAlertTestID.AnimatedView);
   expect(animatedView).toBeDefined();
   const event: LayoutChangeEvent = {
     nativeEvent: {layout: {x: 0, y: 0, height, width: 100}},
-    currentTarget: 0,
-    target: 0,
+    currentTarget: {
+      measure: jest.fn(),
+      measureInWindow: jest.fn(),
+      measureLayout: jest.fn(),
+      setNativeProps: jest.fn(),
+      focus: jest.fn(),
+      blur: jest.fn(),
+    },
+    target: {
+      measure: jest.fn(),
+      measureInWindow: jest.fn(),
+      measureLayout: jest.fn(),
+      setNativeProps: jest.fn(),
+      focus: jest.fn(),
+      blur: jest.fn(),
+    },
     bubbles: false,
     cancelable: false,
     defaultPrevented: false,
@@ -319,17 +340,7 @@ test('Animated.View onLayout function', async () => {
 });
 
 test('it updates status bar on Android', async () => {
-  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-    OS: 'android',
-    select: () => null,
-  }));
-  const currentHeight = 20;
-  jest.mock('react-native/Libraries/Components/StatusBar/StatusBar', () => ({
-    currentHeight,
-    setBackgroundColor: jest.fn(),
-    setTranslucent: jest.fn(),
-    setBarStyle: jest.fn(),
-  }));
+  Platform.OS = 'android';
   let alert = (_data?: DropdownAlertData) =>
     new Promise<DropdownAlertData>(res => res);
   const component = render(
@@ -341,22 +352,12 @@ test('it updates status bar on Android', async () => {
   });
   const button = screen.getByTestId(DropDownAlertTestID.Alert);
   expect(button).toBeDefined();
-  expect(button).toHaveStyle({marginTop: currentHeight});
+  expect(button).toHaveStyle({marginTop: StatusBar.currentHeight});
   expect(component.toJSON()).toMatchSnapshot();
 }, 6000);
 
 test('it updates status bar with containerStyle undefined backgroundColor on Android', async () => {
-  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-    OS: 'android',
-    select: () => null,
-  }));
-  const currentHeight = 20;
-  jest.mock('react-native/Libraries/Components/StatusBar/StatusBar', () => ({
-    currentHeight,
-    setBackgroundColor: jest.fn(),
-    setTranslucent: jest.fn(),
-    setBarStyle: jest.fn(),
-  }));
+  Platform.OS = 'android';
   let alert = (_data?: DropdownAlertData) =>
     new Promise<DropdownAlertData>(res => res);
   const component = render(
@@ -372,7 +373,8 @@ test('it updates status bar with containerStyle undefined backgroundColor on And
   });
   const button = screen.getByTestId(DropDownAlertTestID.Alert);
   expect(button).toBeDefined();
-  expect(button).toHaveStyle({marginTop: currentHeight});
+  expect(button).toHaveStyle({marginTop: StatusBar.currentHeight});
+  expect(component.toJSON()).toMatchSnapshot();
 }, 6000);
 
 test('children prop', async () => {

__tests__/__snapshots__/DropdownAlert.test.tsx.snap

@@ -797,7 +797,101 @@ exports[`it updates status bar on Android 1`] = `
     style={
       {
         "backgroundColor": "#000000",
-        "marginTop": 20,
+        "marginTop": null,
+        "opacity": 1,
+        "padding": 8,
+      }
+    }
+    testID="alert"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        }
+      }
+      testID="safeView"
+    >
+      <View
+        style={
+          {
+            "flex": 1,
+            "marginHorizontal": 8,
+          }
+        }
+        testID="textView"
+      />
+    </View>
+  </View>
+</View>
+`;
+
+exports[`it updates status bar with containerStyle undefined backgroundColor on Android 1`] = `
+<View
+  collapsable={false}
+  onLayout={[Function]}
+  onMoveShouldSetResponder={[Function]}
+  onMoveShouldSetResponderCapture={[Function]}
+  onResponderEnd={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderReject={[Function]}
+  onResponderRelease={[Function]}
+  onResponderStart={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onStartShouldSetResponderCapture={[Function]}
+  style={
+    {
+      "elevation": 1,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+      "transform": [
+        {
+          "translateY": -99,
+        },
+      ],
+      "zIndex": 1,
+    }
+  }
+  testID="animatedView"
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": undefined,
+        "marginTop": null,
         "opacity": 1,
         "padding": 8,
       }

jest.config.js

@@ -135,7 +135,7 @@ module.exports = {
   // setupFiles: [],
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
-  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  // setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

package.json

@@ -32,23 +32,23 @@
   },
   "homepage": "https://github.com/testshallpass/react-native-dropdownalert#readme",
   "devDependencies": {
-    "@react-native/babel-preset": "0.76.2",
-    "@react-native/eslint-config": "0.76.2",
-    "@react-native/typescript-config": "0.76.2",
-    "@testing-library/jest-native": "5.4.3",
-    "@testing-library/react-native": "12.8.1",
+    "@react-native/babel-preset": "0.79.2",
+    "@react-native/eslint-config": "0.79.2",
+    "@react-native/metro-config": "0.79.2",
+    "@react-native/typescript-config": "0.79.2",
+    "@testing-library/react-native": "13.2.0",
     "@types/jest": "29.5.14",
-    "@types/react": "18.3.12",
-    "@types/react-test-renderer": "18.0.7",
+    "@types/react": "19.0.0",
+    "@types/react-test-renderer": "19.0.0",
     "babel-jest": "29.7.0",
     "eslint": "8.57.1",
     "jest": "29.7.0",
     "prettier": "3.3.3",
-    "react": "18.3.1",
-    "react-native": "0.76.2",
-    "react-test-renderer": "18.3.1",
-    "ts-jest": "29.2.5",
+    "react": "19.0.0",
+    "react-native": "0.79.2",
+    "react-test-renderer": "19.0.0",
+    "ts-jest": "29.3.4",
     "typescript": "5.5.4"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.9.2"
 }