Skip to content

scrollToEnd fails on empty FlatList jest #36066

Closed
@Andarius

Description

@Andarius

Description

Calling scrollToEnd on an empty FlatList causes jest tests to fail with the following error:

Invariant Violation: Tried to get frame for out of range index -1
    at invariant (/home/testRn/node_modules/invariant/invariant.js:40:15)
    at VirtualizedList._this._getFrameMetrics (/home/testRn/node_modules/react-native/Libraries/Lists/VirtualizedList.js:384:30)
    at VirtualizedList._this.__getFrameMetricsApprox (/home/testRn/node_modules/react-native/Libraries/Lists/VirtualizedList.js:364:25)
    at VirtualizedList.scrollToEnd (/home/testRn/node_modules/react-native/Libraries/Lists/VirtualizedList.js:457:24)
    at FlatList.scrollToEnd (/home/testRn/node_modules/react-native/Libraries/Lists/FlatList.js:134:23)
    at /home/testRn/__tests__/Test-test.tsx:12:66
    at commitHookEffectListMount (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12999:26)
    at commitPassiveMountOnFiber (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14422:11)
    at commitPassiveMountEffects_complete (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14382:9)
    at commitPassiveMountEffects_begin (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14369:7)
    at commitPassiveMountEffects (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14357:3)
    at flushPassiveEffectsImpl (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16248:3)
    at flushPassiveEffects (/home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16197:14)
    at /home/testRn/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16012:9
    at workLoop (/home/testRn/node_modules/scheduler/cjs/scheduler.development.js:266:34)
    at flushWork (/home/testRn/node_modules/scheduler/cjs/scheduler.development.js:239:14)
    at Immediate.performWorkUntilDeadline (/home/testRn/node_modules/scheduler/cjs/scheduler.development.js:533:21)
    at processImmediate (node:internal/timers:466:21) {
  framesToPop: 1
}

Version

0.71.2

Output of npx react-native info

System:
OS: macOS 13.2
CPU: (12) arm64 Apple M2 Pro
Memory: 434.13 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
npm: 9.4.1 - ~/.nvm/versions/node/v16.19.0/bin/npm
Watchman: 2023.01.30.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /Users/sretracktor/.rvm/rubies/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9514443
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.2 => 0.71.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Run yarn test on a new project with the following test file

import React, { useEffect, useRef } from 'react';
import 'react-native';


// Note: test renderer must be required after react-native.
import { FlatList } from 'react-native';
import renderer from 'react-test-renderer';


function Test(): JSX.Element {

    const ref = useRef<FlatList>(null)

    useEffect(() => {
        ref.current?.scrollToEnd()
    }, [])

    return (
        <FlatList
            ref={ref}
            data={[]}
            renderItem={undefined}
        />
    )
}


it('renders correctly', () => {
  renderer.create(<Test />);
});

Snack, code example, screenshot, or link to a repository

https://github.com/Andarius/testFlatList

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions