react-native-bottom-sheet单元测试覆盖率提升：关键组件测试用例设计

【免费下载链接】react-native-bottom-sheet A performant interactive bottom sheet with fully configurable options 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet

单元测试是保障组件稳定性的核心手段，本文针对react-native-bottom-sheet项目，分析当前测试现状并提供关键组件的测试用例设计方案。通过系统化测试策略，可有效提升测试覆盖率，降低线上故障风险。

测试现状分析

组件测试覆盖情况

项目核心组件位于src/components/目录，包含BottomSheet、BottomSheetModal等交互组件。通过源码分析发现，当前测试文件缺失严重，使用search_files工具搜索"test|spec"关键词未返回任何结果，表明尚未建立基础测试体系。

关键测试目标

基于组件调用频率和复杂度，优先测试以下模块：

• 基础交互组件：BottomSheet、BottomSheetModal
• 滚动容器组件：BottomSheetFlatList、BottomSheetScrollView
• 核心钩子函数：useBottomSheet、useAnimatedSnapPoints

核心组件测试策略

BottomSheet组件测试

src/components/bottomSheet/BottomSheet.tsx作为基础容器组件，需覆盖以下场景：

基础渲染测试

import React from 'react';
import { render } from '@testing-library/react-native';
import { BottomSheet } from '../../src/components/bottomSheet';

describe('BottomSheet', () => {
  it('renders correctly with default props', () => {
    const { getByTestId } = render(
      <BottomSheet
        testID="bottom-sheet"
        snapPoints={['50%']}
        index={0}
      >
        <View testID="content" />
      </BottomSheet>
    );
    
    expect(getByTestId('bottom-sheet')).toBeTruthy();
    expect(getByTestId('content')).toBeTruthy();
  });
});

状态切换测试

测试滑动交互与状态变化的关联性，验证index变化时的组件行为：

it('changes index when dragged', async () => {
  const onIndexChange = jest.fn();
  const { getByTestId } = render(
    <BottomSheet
      testID="bottom-sheet"
      snapPoints={['30%', '70%', '90%']}
      index={0}
      onIndexChange={onIndexChange}
    />
  );
  
  const sheet = getByTestId('bottom-sheet');
  // 模拟拖动手势
  await act(async () => {
    fireEvent.pan(sheet, {
      touches: [{ pageY: 500 }, { pageY: 300 }],
      changedTouches: [{ pageY: 500 }, { pageY: 300 }],
      type: 'pan',
    });
  });
  
  expect(onIndexChange).toHaveBeenCalledWith(1);
});

滚动容器组件测试

以BottomSheetFlatList为例，测试其与底部弹窗的联动效果：

import { BottomSheetFlatList } from '../../src/components/bottomSheetScrollable/BottomSheetFlatList';

describe('BottomSheetFlatList', () => {
  it('handles scroll events correctly', () => {
    const data = Array(20).fill(0).map((_, i) => ({ id: i }));
    const renderItem = ({ item }) => <View testID={`item-${item.id}`} />;
    
    const { getAllByTestId } = render(
      <BottomSheetFlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item.id.toString()}
      />
    );
    
    expect(getAllByTestId(/item-/).length).toBe(20);
  });
});

钩子函数测试

针对useAnimatedSnapPoints等核心钩子，需验证动态计算逻辑：

import { useAnimatedSnapPoints } from '../../src/hooks/useAnimatedSnapPoints';

describe('useAnimatedSnapPoints', () => {
  it('normalizes snap points correctly', () => {
    const snapPoints = useAnimatedSnapPoints(
      ['20%', '50%', '80%'],
      600, // 屏幕高度
      0,
      false
    );
    
    // 验证百分比转像素的计算结果
    expect(snapPoints.value).toEqual([120, 300, 480]);
  });
});

测试工具与配置

Jest配置建议

在项目根目录创建jest.config.js，配置如下：

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  testMatch: ['**/__tests__/**/*.test.tsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
  },
  setupFilesAfterEnv: ['./jest.setup.js'],
};

测试覆盖率报告

执行以下命令生成覆盖率报告：

jest --coverage --collectCoverageFrom='src/components/**/*.{ts,tsx}'

测试用例设计模式

组件测试模板

为确保测试一致性，推荐使用以下模板编写组件测试：

// 1. 导入依赖
import React from 'react';
import { render, act, fireEvent } from '@testing-library/react-native';
import Component from '../path/to/Component';

// 2. 定义测试套件
describe('ComponentName', () => {
  // 3. 基础渲染测试
  it('renders correctly with required props', () => {
    const { getByTestId } = render(<Component requiredProp="value" />);
    expect(getByTestId('component-test-id')).toBeTruthy();
  });

  // 4. 交互测试
  it('triggers callback on user interaction', () => {
    const mockCallback = jest.fn();
    const { getByTestId } = render(
      <Component onEvent={mockCallback} />
    );
    
    act(() => {
      fireEvent.press(getByTestId('interactive-element'));
    });
    
    expect(mockCallback).toHaveBeenCalled();
  });

  // 5. 状态变化测试
  it('updates UI when state changes', () => {
    // 测试组件在不同状态下的UI表现
  });
});

可视化测试结果

通过istanbul等工具生成的覆盖率报告，可直观展示测试覆盖情况。以下为典型的覆盖率仪表盘示例：

该仪表盘展示了各组件的行覆盖率、分支覆盖率等关键指标，帮助团队识别测试薄弱环节。

持续集成配置

在CI流程中添加测试步骤，确保每次提交都通过测试验证：

# .github/workflows/test.yml
name: Test
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npm test -- --coverage

总结与下一步计划

当前项目测试覆盖率提升的关键步骤：

1. 为src/components/bottomSheet/BottomSheet.tsx编写基础交互测试
2. 实现滚动容器组件的集成测试
3. 建立钩子函数的单元测试
4. 配置CI流程确保测试通过

下一步计划包括：

• 实现E2E测试覆盖关键用户流程
• 建立测试驱动开发(TDD)流程
• 开发测试辅助工具库

通过系统化的测试策略，可使项目测试覆盖率从当前的0%提升至80%以上，显著提高组件可靠性。

【免费下载链接】react-native-bottom-sheet A performant interactive bottom sheet with fully configurable options 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet