Skip to content

bug: FlatList causing render errors in RNTL repo #1449

Closed
@mdjastrzebski

Description

@mdjastrzebski

Describe the bug

When rending FlatList in RNTL repo, it throws following error:

  ● Render FlatList

    TypeError: Cannot destructure property 'getItem' of 'props' as it is undefined.

      11 |   let renderer: ReactTestRenderer;
      12 |
    > 13 |   TestRenderer.act(() => {
         |                ^
      14 |     renderer = TestRenderer.create(component, options);
      15 |   });
      16 |

      at FlatList.getItem [as _checkProps] (node_modules/react-native/Libraries/Lists/FlatList.js:477:7)
      at new _checkProps (node_modules/react-native/Libraries/Lists/FlatList.js:420:10)
      at constructClassInstance (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4460:18)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9563:5)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11336:16)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15811:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15745:5)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15717:7)
      at performSyncWorkOnRoot (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15422:20)
      at flushSyncCallbacks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at Object.act (node_modules/react/cjs/react.development.js:2521:11)
      at act (src/render-act.ts:13:16)
      at renderInternal (src/render.tsx:62:33)
      at renderInternal (src/render.tsx:32:10)
      at Object.<anonymous> (src/__tests__/render.test.tsx:8:24)

It works correctly when rendering FlatList in examples/basic app.

Expected behavior

FlatList should render correctly and allow querying initial batch of items.

Steps to Reproduce

Run follwing test in RNTL repo:

test('Render FlatList', () => {
  const screen = render(
    <FlatList
      testID="flatList"
      data={[1, 2, 3]}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );

  expect(screen.getByTestId('flatList')).toBeTruthy();
});

Screenshots

None

Versions

react: 18.2.0 => 18.2.0 
react-native: 0.71.4 => 0.71.4 
react-test-renderer: 18.2.0 => 18.2.0 

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghelp wantedExtra attention is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions