如何用Jest和Enzyme为React Native类组件的FlatList编写测试用例？

前置环境配置 #

确保测试环境正确配置，这是获取有效测试覆盖率的前提：

• 安装必要依赖：

  npm install --save-dev jest enzyme enzyme-adapter-react-16 react-test-renderer
  

• 在项目根目录创建setupTests.js，配置Enzyme适配器：

  import { configure } from 'enzyme';
  import Adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new Adapter() });
  

• 修改package.json中的Jest配置：

  "jest": {
    "preset": "react-native",
    "setupFiles": ["./setupTests.js"],
    "collectCoverageFrom": [
      "**/*.js",
      "!**/node_modules/**",
      "!**/coverage/**"
    ]
  }
  

测试用例编写（MyComponent.test.js） #

首先调整原组件，给TouchableOpacity添加可测试的点击逻辑（原组件无onPress绑定，无法验证交互行为）：

// 修改后的MyComponent.js
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 }) => (
            // 新增onPress回调，通过props传入外部逻辑
            <TouchableOpacity onPress={() => this.props.onItemPress(item.key)}>
              <Text>{item.key}</Text>
            </TouchableOpacity>
          )}
          keyExtractor={(item) => item.key}
        />
      </View>
    );
  }
}

// 设置默认props，避免测试时报错
MyComponent.defaultProps = {
  onItemPress: () => {}
};

export default MyComponent;

接下来编写核心测试用例：

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
import { TouchableOpacity } from 'react-native';

describe('MyComponent', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = shallow(<MyComponent />);
  });

  // 验证FlatList渲染条目数量
  test('FlatList渲染与数据源长度匹配的列表项', () => {
    // 查找所有渲染出的TouchableOpacity组件
    const listItems = wrapper.find(TouchableOpacity);
    // 断言数量与state中data的长度一致
    expect(listItems.length).toBe(wrapper.instance().state.data.length);
  });

  // 验证TouchableOpacity点击交互
  test('点击列表项触发onPress回调', () => {
    // 创建Jest模拟函数
    const mockOnPress = jest.fn();
    // 重新挂载组件并传入模拟回调
    wrapper = shallow(<MyComponent onItemPress={mockOnPress} />);
    
    // 获取第一个列表项的TouchableOpacity
    const firstListItem = wrapper.find(TouchableOpacity).at(0);
    // 模拟点击事件
    firstListItem.simulate('press');
    
    // 断言模拟函数被正确调用
    expect(mockOnPress).toHaveBeenCalledTimes(1);
    expect(mockOnPress).toHaveBeenCalledWith('Item 1');
  });
});

未获取覆盖率的常见原因 #

• Jest配置未设置collectCoverageFrom，导致未收集目标组件的覆盖率数据；
• 使用了错误的渲染方式（如render仅生成静态结构），无法覆盖交互逻辑；
• 原组件无可测试的交互分支（如未定义onPress），导致代码分支未被触发。

内容的提问来源于stack exchange，提问作者Akarsh KR