使用Enzyme测试React Native FlatList

Question

我正在尝试使用Enzyme测试React Native FlatList。我想检查当列表到达末尾时是否调用了正确的函数：

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)
    })
})

但这是我得到的东西：

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)

我做错了什么？测试的正确方法是什么？

- Enuff

Answer 1

目前来看，一旦你超出了非常简单的浅层渲染和快照组合，使用enzyme测试React Native似乎不可能/不太好。

我发现使用Test Renderer更可靠，可以呈现出像FlatList这样的东西，遍历它并调用操作。

此外，测试上述内容将会很棘手，到目前为止，我一直在使用间谍检查正确的API是否被调用，而不是像上面那样测试功能。

然而，这个错误发生是因为ScrollView模拟中没有正确模拟scrollTo，你可以通过jest.mock进行黑客处理。参见：this issue

- jsfellow

---

同意。我尝试使用enzyme和react-native-mock-render来帮助模拟本地组件，但是我发现模拟的组件不够完整，无法进行断言或快照测试，最终还是回归到了jest和react-test-renderer。这是一个不断变化的目标。React Native获得了像FlatList这样的新控件，如果要对其进行任何良好的测试，就需要正确地模拟它们。这并不是一项容易的任务。 - Ryan H.