Can I test to animated component in react-native with jest?

Question

I wonder what I can test to animated component in react-native with jest.

I have tried to test below component...

( UIComponent... )
<Animated.FlatList
        ref={ref}
        data={events}
        onScroll={onScroll}
        ... and so on other attribute ...
/>


( test code... )
describe('test', () => {
  it('test', () => {
    const mockedClient:MockApolloClient = createMockClient();
    const {debug} = render(
      <ApolloProvider>
        <UIComponent />
      </ApolloProvider>
    )
    debug();
  })
})

but, There are error in my test code with 'PrettyFormatPluginError: Invalid string lengthRangeError: Invalid string length'. I do not know why this error occurs.

For solving this problem, I have deleted to string, 'Animated' in <Animated.FlatList>. ( just ) So, This test code has success ! It shows me the result of debug().

How can i test to this Animated component?

Answer 1

You have to mock FlatList like this:

// test.setup.js
import RN from 'react-native';

jest
  .spyOn(RN.Animated, 'FlatList', 'get')
  .mockImplementation(() => RN.FlatList);

Reference: https://github.com/satya164/react-native-tab-view/issues/1104#issuecomment-932552609