CODEWITHSUNDEEP
javascriptreact-nativeenzymejestjs
Enuff
Enuff

Reputation: 516

Testing React Native FlatList with Enzyme

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/components/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?

Upvotes: 6

Views: 5713

Answers (1)

jsfellow
jsfellow

Reputation: 91

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 combo.

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

Upvotes: 6

Related Questions