React Native中Detox无法识别Stack.Screen的options内testID问题

在React Native应用中完成Detox的安装配置并运行E2E测试时，发现传入Stack.Screen的options对象中的testID无法被Detox识别，但普通组件（如Text）的testID可以正常被检测到。

Home组件代码 #

import { React } from 'React';
import { createStackNavigator, StackNavigationOptions } from '@react-navigation/stack';
import { View, Text } from 'react-native';

const Stack = createStackNavigator();

const Home = () => {
  return (
    <>
      <View>
        <Text testID="homeText">Detox</Text>
      </View>
      <Stack.Navigator initialRouteName="Hello">
        <Stack.Screen
          name="Hello"
          options={
            {
              title: 'Hello World',
              testID: 'helloScreen',
            } as StackNavigationOptions
          }>
          {() => <Text>Hello World</Text>}
        </Stack.Screen>
        <Stack.Screen
          name="WelcomeBack"
          options={
            {
              title: 'Welcome back',
              testID: 'welcomeBackScreen',
            } as StackNavigationOptions
          }>
          {() => <Text>Welcome back</Text>}
        </Stack.Screen>
      </Stack.Navigator>
    </>
  );
};

export default Home;

E2E测试代码 #

describe('Home Screen', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should display "Detox" text', async () => {
    await expect(element(by.id('homeText'))).toHaveText('Detox');
  }); // [OK]

  it('should display "Hello World" text', async () => {
    await expect(element(by.id('helloScreen'))).toBeVisible();
  }); // [FAIL]

  it('should display "Welcome back" text', async () => {
    await expect(element(by.id('welcomeBackScreen'))).toBeVisible();
  }); // [FAIL]
});

测试失败信息 #

Test Failed: No elements found for “MATCHER(id == “helloScreen”)”
.
.
.
Test Failed: No elements found for “MATCHER(id == “welcomeBackScreen”)”

解决方案 #

核心原因 #

React Navigation的Stack.Screen的options参数中的testID并不会被自动绑定到屏幕的根容器组件上，Detox无法检测到这个未挂载到真实原生视图的属性。

可行修复方案 #

• 方案一：给屏幕根容器添加testID
  修改Stack.Screen的渲染内容，给每个屏幕的根元素（通常是View）设置对应的testID：

  <Stack.Screen
    name="Hello"
    options={{ title: 'Hello World' } as StackNavigationOptions}>
    {() => <View testID="helloScreen"><Text>Hello World</Text></View>}
  </Stack.Screen>
  <Stack.Screen
    name="WelcomeBack"
    options={{ title: 'Welcome back' } as StackNavigationOptions}>
    {() => <View testID="welcomeBackScreen"><Text>Welcome back</Text></View>}
  </Stack.Screen>
  

  这种方式直接在Detox可检测的原生视图上设置testID，是最直接有效的方法。

• 方案二：自定义Header并设置testID（针对导航栏）
  如果你的测试目标是导航栏而非整个屏幕，可以在options中自定义header组件并添加testID：

  options={{
    title: 'Hello World',
    header: () => <View testID="helloScreenHeader"><Text>Hello World</Text></View>
  } as StackNavigationOptions}
  

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