How can I write test cases for FlatList using Jest and Enzyme in a React Native class component?

Question

I'm working on a React Native project and I have a class component that includes a FlatList with TouchableOpacity components. I want to write test cases for this component using Jest and Enzyme to ensure that the FlatList and TouchableOpacity interactions are functioning correctly. However, I'm not sure where to start and how to structure my test suite.

Here's a simplified example of my React Native class component:

import React, { Component } from "react";
import { View, FlatList, TouchableOpacity, Text } from "react-native";

class MyComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            data: [{ key: "Item 1" }, { key: "Item 2" }, { key: "Item 3" }],
        };
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => (
                        <TouchableOpacity>
                            <Text>{item.key}</Text>
                        </TouchableOpacity>
                    )}
                    keyExtractor={(item) => item.key}
                />
            </View>
        );
    }
}

export default MyComponent;

I want to write test cases to:

• Ensure that the FlatList renders correctly with the expected number of items.
• Simulate TouchableOpacity presses and verify that the onPress event is triggered.

What is some guidance on how to write these test cases using Jest and Enzyme for a React Native class component like the one above?

I tried many things, but there isn't any coverage.

Answer 1

Here is the code to write test cases for your React Native class component using Jest and Enzyme:

import React from "react";
import { shallow } from "enzyme";
import MyComponent from "./MyComponent";

describe("MyComponent", () => {
  it("renders the correct number of items in FlatList", () => {
    const wrapper = shallow(<MyComponent />);
    const flatList = wrapper.find("FlatList");
    expect(flatList.prop("data")).toHaveLength(3); // Adjust the length as per your data
  });

  it("triggers onPress event for TouchableOpacity", () => {
    const wrapper = shallow(<MyComponent />);
    const touchableOpacity = wrapper.find("TouchableOpacity").first();
    const onPressMock = jest.fn();
    touchableOpacity.props().onPress = onPressMock;
    touchableOpacity.simulate("press");
    expect(onPressMock).toHaveBeenCalled();
  });
});

Make sure you have installed the necessary testing dependencies (jest, enzyme, enzyme-adapter-react-16, etc.) and configured your testing environment properly. You can adjust the test cases as needed based on your specific component structure and requirements.

Remember that Enzyme's shallow rendering doesn't handle deep rendering of child components, so if you need to test more complex interactions involving child components, you might consider using mount instead of shallow.

Also, ensure that you have proper imports for your test environment and update the paths to your components accordingly.