fixed all tests

.eslintrc.cjs

@@ -4,7 +4,6 @@ module.exports = {
     // jest: true,
     browser: true,
     node: true,
-    // 'jest/globals': true,
   },
   parser: '@typescript-eslint/parser',
   extends: [
@@ -28,10 +27,13 @@ module.exports = {
         project: './tsconfig.json',
       },
     },
-    // {
-    //   files: ['*.snap'],
-    //   processor: 'jest/.snap',
-    // },
+    {
+      files: ["tests/**/*"],
+      plugins: ["jest"],
+      env: {
+        'jest/globals': true,
+      },
+    },
   ],
   parserOptions: {
     ecmaFeatures: {

babel.config.cjs

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true)
+
+  return {
+    presets: [
+      '@babel/preset-env',
+      'module:@react-native/babel-preset',
+      '@babel/preset-typescript',
+    ],
+    plugins: [
+      '@babel/plugin-transform-flow-strip-types',
+      '@babel/plugin-transform-unicode-property-regex',
+      '@babel/plugin-transform-react-jsx',
+      'react-native-reanimated/plugin',
+    ],
+  }
+}

jest.config.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  preset: 'react-native',
+  resetMocks: true,
+  setupFiles: [
+    './node_modules/react-native/jest-preset',
+    // './node_modules/react-native/jest/setup.js',
+    './tests/setup.js'
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
+  moduleNameMapper: {
+    uuid: require.resolve('uuid'),
+  },
+  transform: {
+    '\\.js$': ['babel-jest', { configFile: './babel.config.cjs' }],
+  },
+  transformIgnorePatterns: [],
+  testMatch: ['**/*.test.ts?(x)'],
+  modulePathIgnorePatterns: ['./example'],
+  coveragePathIgnorePatterns: ['./src/__tests__/'],
+}

package.json

@@ -69,15 +69,20 @@
     "uuid": "10.0.0"
   },
   "devDependencies": {
-    "@react-native/eslint-config": "^0.75.2",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-react-jsx": "^7.25.2",
+    "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+    "@babel/preset-env": "^7.25.4",
+    "@react-native/eslint-config": "^0.74.82",
     "@stylistic/eslint-plugin": "^2.6.4",
-    "@types/jest": "29.5.12",
+    "@types/jest": "^29.5.12",
     "@types/react": "~18.3.3",
     "@types/react-native": "~0.72.8",
     "@types/react-test-renderer": "18.3.0",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.2.0",
     "@typescript-eslint/parser": "^8.2.0",
+    "babel-jest": "^29.7.0",
     "eslint": "^8.57.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-config-standard-jsx": "^11.0.0",
@@ -95,7 +100,7 @@
     "lint-staged": "^15.2.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.75.2",
+    "react-native": "0.74.5",
     "react-test-renderer": "18.3.1",
     "typescript": "5.5.4"
   },

src/MessageImage.tsx

@@ -16,7 +16,6 @@ import { IMessage } from './Models'
 import { StylePropType } from './utils'
 
 const styles = StyleSheet.create({
-  container: {},
   image: {
     width: 150,
     height: 100,
@@ -51,7 +50,7 @@ export function MessageImage<TMessage extends IMessage = IMessage> ({
     return null
 
   return (
-    <View style={[styles.container, containerStyle]}>
+    <View style={containerStyle}>
       {/* @ts-expect-error: Lightbox types are not fully compatible */}
       <Lightbox
         activeProps={{

src/__tests__/Avatar.test.tsx

@@ -6,7 +6,7 @@ import { Avatar } from '../GiftedChat'
 
 it('should render <Avatar /> and compare with snapshot', () => {
   const tree = renderer
-    .create(<Avatar renderAvatar={() => 'renderAvatar'} />)
+    .create(<Avatar renderAvatar={() => 'renderAvatar'} position='left' />)
     .toJSON()
 
   expect(tree).toMatchSnapshot()

src/__tests__/GiftedChat.test.tsx

@@ -1,6 +1,7 @@
 import 'react-native'
 import React from 'react'
 import renderer from 'react-test-renderer'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 
 import { GiftedChat } from '../GiftedChat'
 
@@ -19,13 +20,15 @@ const messages = [
 it('should render <GiftedChat/> and compare with snapshot', () => {
   const tree = renderer
     .create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-      />
+      <SafeAreaProvider>
+        <GiftedChat
+          messages={messages}
+          onSend={() => { }}
+          user={{
+            _id: 1,
+          }}
+        />
+      </SafeAreaProvider>
     )
     .toJSON()
 

src/__tests__/__snapshots__/Actions.test.tsx.snap

@@ -2,7 +2,25 @@
 
 exports[`should render <Actions /> and compare with snapshot 1`] = `
 <View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={true}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -12,7 +30,7 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Object {
+    {
       "height": 26,
       "marginBottom": 10,
       "marginLeft": 10,
@@ -23,25 +41,28 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
+          "alignItems": "center",
           "borderColor": "#b2b2b2",
           "borderRadius": 13,
           "borderWidth": 2,
           "flex": 1,
+          "justifyContent": "center",
         },
         undefined,
       ]
     }
   >
     <Text
       style={
-        Array [
-          Object {
+        [
+          {
             "backgroundColor": "transparent",
             "color": "#b2b2b2",
             "fontSize": 16,
             "fontWeight": "bold",
+            "lineHeight": 16,
             "textAlign": "center",
           },
           undefined,

src/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`should render <Avatar /> and compare with snapshot 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "marginRight": 8,
       },
-      Object {},
+      undefined,
       undefined,
     ]
   }

src/__tests__/__snapshots__/Bubble.test.tsx.snap

@@ -3,8 +3,8 @@
 exports[`should render <Bubble /> and compare with snapshot 1`] = `
 <View
   style={
-    Array [
-      Object {
+    [
+      {
         "alignItems": "flex-start",
         "flex": 1,
       },
@@ -14,8 +14,8 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "backgroundColor": "#f0f0f0",
           "borderRadius": 15,
           "justifyContent": "flex-end",
@@ -30,6 +30,15 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
   >
     <View
       accessibilityRole="text"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -43,16 +52,16 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       <View>
         <View
           style={
-            Array [
-              Object {},
+            [
+              {},
               undefined,
             ]
           }
         >
           <Text
             style={
-              Array [
-                Object {
+              [
+                {
                   "color": "black",
                   "fontSize": 16,
                   "lineHeight": 20,
@@ -68,9 +77,9 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
           >
             <Text
               style={
-                Array [
-                  Array [
-                    Object {
+                [
+                  [
+                    {
                       "color": "black",
                       "fontSize": 16,
                       "lineHeight": 20,
@@ -93,8 +102,8 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       </View>
       <View
         style={
-          Array [
-            Object {
+          [
+            {
               "flexDirection": "row",
               "justifyContent": "flex-start",
             },
@@ -104,8 +113,8 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
       >
         <View
           style={
-            Array [
-              Object {
+            [
+              {
                 "marginBottom": 5,
                 "marginLeft": 10,
                 "marginRight": 10,
@@ -116,9 +125,8 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
         >
           <Text
             style={
-              Array [
-                Object {
-                  "backgroundColor": "transparent",
+              [
+                {
                   "color": "#aaa",
                   "fontSize": 10,
                   "textAlign": "right",
@@ -127,7 +135,7 @@ exports[`should render <Bubble /> and compare with snapshot 1`] = `
               ]
             }
           >
-            7:20 PM
+            8:20 PM
           </Text>
         </View>
       </View>

src/__tests__/__snapshots__/Color.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should compare Color with snapshot 1`] = `
-Object {
+{
   "alizarin": "#e74c3c",
   "backgroundTransparent": "transparent",
   "black": "#000",