Skip to content

bug: FlatList causing render errors in RNTL repo #1449

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mdjastrzebski opened this issue Aug 11, 2023 · 1 comment · Fixed by #1467
Closed

bug: FlatList causing render errors in RNTL repo #1449

mdjastrzebski opened this issue Aug 11, 2023 · 1 comment · Fixed by #1467
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@mdjastrzebski
Copy link
Member

mdjastrzebski commented Aug 11, 2023

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 
@mdjastrzebski mdjastrzebski added bug Something isn't working help wanted Extra attention is needed labels Aug 11, 2023
@mdjastrzebski mdjastrzebski changed the title bug: FlatList causing render errors bug: FlatList causing render errors in RNTL repo Aug 11, 2023
@mdjastrzebski
Copy link
Member Author

The issue seems to persist, even if RN version is upgrade to match examples/basic (0.72.3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant