React Native相机屏幕Jest测试：useState与权限验证失败排查

针对你遇到的Jest测试中点击按钮后无法找到Camera组件的问题，核心原因是权限请求的异步状态更新未被测试正确捕获，以及权限API的模拟未同步到组件内部的useState状态。以下是具体的解决方案：

一、先明确组件核心逻辑的正确写法（简化版） #

确保组件内权限状态与相机渲染的逻辑关联正确：

import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import { Camera, useCameraPermissions } from 'react-native-vision-camera';

const ScannerScreen = () => {
  // 用useState记录最终权限状态，控制Camera渲染
  const [cameraAuthorized, setCameraAuthorized] = useState(false);
  // 调用Vision Camera的权限hook
  const [permissionStatus, requestCameraPermission] = useCameraPermissions();

  const handleOpenCamera = async () => {
    // 请求权限并更新本地状态
    const status = await requestCameraPermission();
    setCameraAuthorized(status === 'authorized');
  };

  return (
    <View style={{ flex: 1 }}>
      {!cameraAuthorized ? (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>需要相机权限才能扫码</Text>
          <Button title="打开相机" onPress={handleOpenCamera} />
        </View>
      ) : (
        // 给Camera加testID，方便测试定位
        <Camera testID="camera-scanner" style={{ flex: 1 }} />
      )}
    </View>
  );
};

export default ScannerScreen;

二、Jest测试的正确实现 #

1. 模拟权限API与Camera组件 #

首先需要模拟react-native-vision-camera的权限hook和Camera组件，避免调用原生代码：

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react-native';
import ScannerScreen from '../ScannerScreen';
import { useCameraPermissions, Camera } from 'react-native-vision-camera';

// 模拟Vision Camera的核心依赖
jest.mock('react-native-vision-camera', () => ({
  ...jest.requireActual('react-native-vision-camera'),
  // 模拟权限hook，返回状态和请求函数
  useCameraPermissions: jest.fn(),
  // 模拟Camera组件，渲染带testID的视图
  Camera: jest.fn(() => <View testID="camera-scanner" />),
}));

2. 编写权限授权的测试用例 #

重点是等待异步权限请求完成后，断言Camera组件是否渲染：

describe('ScannerScreen 权限测试', () => {
  // 每个测试前重置mock，避免用例污染
  beforeEach(() => {
    useCameraPermissions.mockReset();
  });

  test('点击"打开相机"并授权后，渲染Camera组件', async () => {
    // 初始化mock：初始权限为拒绝，请求后返回授权
    useCameraPermissions.mockReturnValue([
      'denied',
      jest.fn().mockResolvedValue('authorized'),
    ]);

    const { getByText, queryByTestId } = render(<ScannerScreen />);

    // 初始状态下，Camera组件不存在
    expect(queryByTestId('camera-scanner')).toBeNull();

    // 触发按钮点击
    fireEvent.press(getByText('打开相机'));

    // 等待异步权限请求完成、状态更新后再断言
    await waitFor(() => {
      expect(queryByTestId('camera-scanner')).toBeTruthy();
    });
  });

  test('点击"打开相机"但拒绝权限时，不渲染Camera组件', async () => {
    useCameraPermissions.mockReturnValue([
      'denied',
      jest.fn().mockResolvedValue('denied'),
    ]);

    const { getByText, queryByTestId } = render(<ScannerScreen />);

    fireEvent.press(getByText('打开相机'));

    await waitFor(() => {
      expect(queryByTestId('camera-scanner')).toBeNull();
    });
  });
});

三、关键注意事项 #

1. 必须用waitFor处理异步更新：权限请求是异步操作，组件状态更新不会立即完成，直接断言会因渲染滞后导致失败。
2. 精准模拟权限返回值：确保useCameraPermissions的mock返回与真实场景一致的状态（authorized/denied）。
3. 用testID定位组件：相比通过组件类型查询，testID更稳定，避免mock组件的类型识别问题。
4. 重置mock状态：在beforeEach中重置mock，防止不同测试用例的状态互相干扰。

四、如果使用PermissionsAndroid而非Vision Camera的权限Hook #

若你的组件是直接用React Native原生的PermissionsAndroid请求权限，只需调整mock对象：

// 模拟PermissionsAndroid
jest.mock('react-native/Libraries/PermissionsAndroid/PermissionsAndroid', () => ({
  PERMISSIONS: { CAMERA: 'android.permission.CAMERA' },
  RESULTS: { GRANTED: 'granted', DENIED: 'denied' },
  request: jest.fn(),
}));

// 在测试用例中设置mock返回
PermissionsAndroid.request.mockResolvedValue(PermissionsAndroid.RESULTS.GRANTED);

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