react-native-gifted-chat 2.8.2-alpha.0 → 2.8.2-alpha.2

package/src/__tests__/Day.test.tsx

@@ -1,23 +1,20 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Day } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Day', () => {
   it('should not render <Day /> and compare with snapshot', () => {
-    const component = renderer.create(<Day />)
-    const tree = component.toJSON()
+    const { toJSON } = render(<Day />)
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Day /> and compare with snapshot', () => {
-    const component = renderer.create(
+    const { toJSON } = render(
       <Day currentMessage={DEFAULT_TEST_MESSAGE} />
     )
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/DayAnimated.test.tsx

@@ -1,8 +1,8 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
-import DayAnimated from '../MessageContainer/components/DayAnimated'
+import { View, Text } from 'react-native'
+import { render } from '@testing-library/react-native'
 import { DayProps } from '../Day'
+import DayAnimated from '../MessageContainer/components/DayAnimated'
 
 const mockDaysPositions = { value: {} }
 const mockScrolledY = { value: 0 }
@@ -17,7 +17,7 @@ const mockMessage = {
 
 describe('DayAnimated', () => {
   it('should render DayAnimated with default Day component', () => {
-    const component = renderer.create(
+    const { toJSON } = render(
       <DayAnimated
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
@@ -26,14 +26,17 @@ describe('DayAnimated', () => {
         isLoadingEarlier={false}
       />
     )
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should use custom renderDay when provided', () => {
-    const customRenderDay = jest.fn((props: DayProps) => <div data-testid='custom-day'>Custom Day: {props.createdAt}</div>)
+    const customRenderDay = jest.fn((props: DayProps) => (
+      <View testID='custom-day'>
+        <Text>Custom Day: {props.createdAt}</Text>
+      </View>
+    ))
 
-    const component = renderer.create(
+    const { toJSON } = render(
       <DayAnimated
         scrolledY={mockScrolledY}
         daysPositions={mockDaysPositions}
@@ -44,11 +47,6 @@ describe('DayAnimated', () => {
       />
     )
 
-    // Force render to trigger the renderDay call if there's a createdAt
-    component.getInstance()
-
-    // The custom renderDay function should be available in the component
-    const tree = component.toJSON()
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/GiftedAvatar.test.tsx

@@ -1,15 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { GiftedAvatar } from '../GiftedChat'
 
 it('should render <GiftedAvatar /> and compare with snapshot', () => {
-  let tree
+  const { toJSON } = render(<GiftedAvatar />)
 
-  renderer.act(() => {
-    tree = renderer.create(<GiftedAvatar />)
-  })
-
-  expect(tree.toJSON()).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/GiftedChat.test.tsx

@@ -1,9 +1,8 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
-import { GiftedChat } from '../GiftedChat'
 import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
+import { GiftedChat } from '../GiftedChat'
 
 const messages = [
   {
@@ -18,50 +17,42 @@ const messages = [
 ]
 
 it('should render <GiftedChat/> and compare with snapshot', () => {
-  let tree
-
-  renderer.act(() => {
-    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-      height: {
-        value: 0,
-      },
-    })
-
-    tree = renderer.create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-      />
-    )
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
   })
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
 })
 
-it('should render <GiftedChat/> with disableKeyboardController=true', () => {
-  let tree
-
-  renderer.act(() => {
-    (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
-      height: {
-        value: 0,
-      },
-    })
-
-    tree = renderer.create(
-      <GiftedChat
-        messages={messages}
-        onSend={() => {}}
-        user={{
-          _id: 1,
-        }}
-        disableKeyboardController={true}
-      />
-    )
+it('should render <GiftedChat/> with isKeyboardInternallyHandled=false', () => {
+  (useReanimatedKeyboardAnimation as jest.Mock).mockReturnValue({
+    height: {
+      value: 0,
+    },
   })
 
-  expect(tree.toJSON()).toMatchSnapshot()
+  const { toJSON } = render(
+    <GiftedChat
+      messages={messages}
+      onSend={() => {}}
+      user={{
+        _id: 1,
+      }}
+      isKeyboardInternallyHandled={false}
+    />
+  )
+
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/InputToolbar.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { InputToolbar } from '../GiftedChat'
 
 it('should render <InputToolbar /> and compare with snapshot', () => {
-  const tree = renderer.create(<InputToolbar />).toJSON()
+  const { toJSON } = render(<InputToolbar />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/LoadEarlier.test.tsx

@@ -1,11 +1,10 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { LoadEarlier } from '../GiftedChat'
 
 it('should render <LoadEarlier /> and compare with snapshot', () => {
-  const tree = renderer.create(<LoadEarlier />).toJSON()
+  const { toJSON } = render(<LoadEarlier />)
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Message.test.tsx

@@ -1,80 +1,73 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Message } from '../GiftedChat'
 
 describe('Message component', () => {
   it('should render <Message /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
-            _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: { _id: 1 },
-          }}
-          position='left'
-        />
-      )
-      .toJSON()
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: { _id: 1 },
+        }}
+        position='left'
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should NOT render <Message />', () => {
-    const tree = renderer
-      .create(<Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />)
-      .toJSON()
+    const { toJSON } = render(
+      <Message key='123' user={{ _id: 1 }} currentMessage={null} position='left' />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Message /> with Avatar', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
-            _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: { _id: 1 },
-          }}
-          position='left'
-          showUserAvatar
-        />
-      )
-      .toJSON()
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: { _id: 1 },
+        }}
+        position='left'
+        showUserAvatar
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render null if user has no Avatar', () => {
-    const tree = renderer
-      .create(
-        <Message
-          key='123'
-          user={{ _id: 1 }}
-          currentMessage={{
+    const { toJSON } = render(
+      <Message
+        key='123'
+        user={{ _id: 1 }}
+        currentMessage={{
+          _id: 1,
+          text: 'test',
+          createdAt: 1554744013721,
+          user: {
             _id: 1,
-            text: 'test',
-            createdAt: 1554744013721,
-            user: {
-              _id: 1,
-              avatar: null,
-            },
-          }}
-          position='left'
-          showUserAvatar
-        />
-      )
-      .toJSON()
+            avatar: null,
+          },
+        }}
+        position='left'
+        showUserAvatar
+      />
+    )
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/MessageContainer.test.tsx

@@ -1,11 +1,45 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageContainer } from '../GiftedChat'
+import { DEFAULT_TEST_MESSAGE } from './data'
 
-it('should render <MessageContainer /> and compare with snapshot', () => {
-  const tree = renderer.create(<MessageContainer />).toJSON()
+it('should render <MessageContainer /> without crashing', () => {
+  render(
+    <MessageContainer
+      messages={[DEFAULT_TEST_MESSAGE]}
+      user={{ _id: 'test' }}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  // Just verify it renders without throwing
+  expect(() => render(
+    <MessageContainer
+      messages={[DEFAULT_TEST_MESSAGE]}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
+})
+
+it('should render <MessageContainer /> with multiple messages', () => {
+  const messages = [
+    { ...DEFAULT_TEST_MESSAGE, _id: 'test1' },
+    { ...DEFAULT_TEST_MESSAGE, _id: 'test2' },
+  ]
+
+  expect(() => render(
+    <MessageContainer
+      messages={messages}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
+})
+
+it('should render <MessageContainer /> with empty messages', () => {
+  expect(() => render(
+    <MessageContainer
+      messages={[]}
+      user={{ _id: 'test' }}
+    />
+  )).not.toThrow()
 })

package/src/__tests__/MessageImage.test.tsx

@@ -1,27 +1,24 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageImage } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('MessageImage', () => {
   it('should not render <MessageImage /> and compare with snapshot', () => {
-    const tree = renderer.create(<MessageImage />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<MessageImage />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should  render <MessageImage /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <MessageImage
-          currentMessage={{
-            ...DEFAULT_TEST_MESSAGE,
-            image: 'url://to/image.png',
-          }}
-        />
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(
+      <MessageImage
+        currentMessage={{
+          ...DEFAULT_TEST_MESSAGE,
+          image: 'url://to/image.png',
+        }}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/MessageText.test.tsx

@@ -1,11 +1,14 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { MessageText } from '../GiftedChat'
 
 it('should render <MessageText /> and compare with snapshot', () => {
-  const tree = renderer.create(<MessageText />).toJSON()
+  const { toJSON } = render(
+    <MessageText
+      currentMessage={{ _id: 1, createdAt: new Date(), text: 'test message' }}
+    />
+  )
 
-  expect(tree).toMatchSnapshot()
+  expect(toJSON()).toMatchSnapshot()
 })

package/src/__tests__/Send.test.tsx

@@ -1,22 +1,21 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Send } from '../GiftedChat'
 
 describe('Send', () => {
   it('should not render <Send /> and compare with snapshot', () => {
-    const tree = renderer.create(<Send />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should always render <Send /> and compare with snapshot', () => {
-    const tree = renderer.create(<Send alwaysShowSend />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send alwaysShowSend />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Send /> where there is input and compare with snapshot', () => {
-    const tree = renderer.create(<Send text='test input' />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<Send text='test input' />)
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/SystemMessage.test.tsx

@@ -1,27 +1,24 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { SystemMessage } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('SystemMessage', () => {
   it('should not render <SystemMessage /> and compare with snapshot', () => {
-    const tree = renderer.create(<SystemMessage />).toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(<SystemMessage />)
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <SystemMessage /> and compare with snapshot', () => {
-    const tree = renderer
-      .create(
-        <SystemMessage
-          currentMessage={{
-            ...DEFAULT_TEST_MESSAGE,
-            system: true,
-          }}
-        />
-      )
-      .toJSON()
-    expect(tree).toMatchSnapshot()
+    const { toJSON } = render(
+      <SystemMessage
+        currentMessage={{
+          ...DEFAULT_TEST_MESSAGE,
+          system: true,
+        }}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
   })
 })

package/src/__tests__/Time.test.tsx

@@ -1,20 +1,18 @@
-import 'react-native'
 import React from 'react'
-import renderer from 'react-test-renderer'
+import { render } from '@testing-library/react-native'
 
 import { Time } from '../GiftedChat'
 import { DEFAULT_TEST_MESSAGE } from './data'
 
 describe('Time', () => {
   it('should not render <Time /> and compare with snapshot', () => {
-    const component = renderer.create(<Time />)
-    const tree = component.toJSON()
+    const { toJSON } = render(<Time />)
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 
   it('should render <Time /> and compare with snapshot', () => {
-    const component = renderer.create(
+    const { toJSON } = render(
       <Time
         currentMessage={{
           ...DEFAULT_TEST_MESSAGE,
@@ -22,8 +20,7 @@ describe('Time', () => {
         }}
       />
     )
-    const tree = component.toJSON()
 
-    expect(tree).toMatchSnapshot()
+    expect(toJSON()).toMatchSnapshot()
   })
 })

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

@@ -22,7 +22,34 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   accessible={true}
   collapsable={false}
   focusable={true}
+  jestAnimatedProps={
+    {
+      "value": {},
+    }
+  }
+  jestAnimatedStyle={
+    {
+      "value": {
+        "opacity": 1,
+      },
+    }
+  }
+  jestInlineStyle={
+    [
+      [
+        {
+          "height": 26,
+          "marginBottom": 10,
+          "marginLeft": 10,
+          "width": 26,
+        },
+        undefined,
+      ],
+    ]
+  }
+  onBlur={[Function]}
   onClick={[Function]}
+  onFocus={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -30,13 +57,18 @@ exports[`should render <Actions /> and compare with snapshot 1`] = `
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    {
-      "height": 26,
-      "marginBottom": 10,
-      "marginLeft": 10,
-      "opacity": 1,
-      "width": 26,
-    }
+    [
+      {
+        "height": 26,
+        "marginBottom": 10,
+        "marginLeft": 10,
+        "width": 26,
+      },
+      undefined,
+      {
+        "opacity": 1,
+      },
+    ]
   }
 >
   <View