I'm trying to test with Enzyme a React Native FlatList. I want to check if the right function is called when the list reaches the end:

import { listIsAtTheEnd } from "./actions";
import { mount } from "enzyme";
jest.mock("./actions");


describe("Main page", () => {
    if("Calls listIsAtTheEnd when FlatList reaches the end", () => {
        var app = mount(<App />);
        var container = app.find("FlatListContainer");
        var fList = container.childAt(0);
        fList.instance().scrollToEnd();

        expect(listIsAtTheEnd.mock.calls).toHaveLength(1)
    })
})

But this is what I'm getting:

TypeError: this._scrollRef.scrollTo is not a function

  at VirtualizedList.scrollToEnd (node_modules/react-native/Libraries/Lists/VirtualizedList.js:219:17)
  at FlatList.scrollToEnd (node_modules/react-native/Libraries/Lists/FlatList.js:544:141)
  at Object.<anonymous> (src/ponents/forumPage/__tests__/forumPageTests.js:81:21)
  at tryCallTwo (node_modules/promise/lib/core.js:45:5)
  at doResolve (node_modules/promise/lib/core.js:200:13)
  at new Promise (node_modules/promise/lib/core.js:66:3)

What am I doing wrong? What's the correct way to test this?

I'm trying to test with Enzyme a React Native FlatList. I want to check if the right function is called when the list reaches the end:

import { listIsAtTheEnd } from "./actions";
import { mount } from "enzyme";
jest.mock("./actions");


describe("Main page", () => {
    if("Calls listIsAtTheEnd when FlatList reaches the end", () => {
        var app = mount(<App />);
        var container = app.find("FlatListContainer");
        var fList = container.childAt(0);
        fList.instance().scrollToEnd();

        expect(listIsAtTheEnd.mock.calls).toHaveLength(1)
    })
})

But this is what I'm getting:

TypeError: this._scrollRef.scrollTo is not a function

  at VirtualizedList.scrollToEnd (node_modules/react-native/Libraries/Lists/VirtualizedList.js:219:17)
  at FlatList.scrollToEnd (node_modules/react-native/Libraries/Lists/FlatList.js:544:141)
  at Object.<anonymous> (src/ponents/forumPage/__tests__/forumPageTests.js:81:21)
  at tryCallTwo (node_modules/promise/lib/core.js:45:5)
  at doResolve (node_modules/promise/lib/core.js:200:13)
  at new Promise (node_modules/promise/lib/core.js:66:3)

What am I doing wrong? What's the correct way to test this?

• javascript
• react-native
• enzyme
• jestjs

Share Improve this question Follow asked Oct 21, 2017 at 17:10 EnuffEnuff 51677 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

As it stands it doesn't seem possible/very nice to test React Native with enzyme as soon as you go beyond a very simple shallow render and snapshot bo.

I've found using Test Renderer far more reliable to render out something like a FlatList, traversing it and invoking actions

In addition testing the above is going to be tricky, so far I've been checking the correct APIs are invoked using spies rather than actually testing the functionality as above.

This error happens though because scrollTo hasn't been correctly mocked on the ScrollView mock which you can hack around with jest.mock for example. See: this issue