Package Exports

babel-plugin-react-native-testid
babel-plugin-react-native-testid/dest/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babel-plugin-react-native-testid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babel-plugin-react-native-testid

一个智能的Babel插件，为React Native组件自动生成testID属性，支持多种优先级策略，特别适用于自动化测试（如Detox）。

特性

🎯 智能优先级策略: 按照预定义的优先级自动生成testID
🌐 多语言支持: 智能提取i18n翻译键作为testID
📱 React Native优化: 专为React Native组件设计
⚙️ 高度可配置: 支持自定义属性、分隔符和忽略元素
🔄 向后兼容: 保持与原有testID的兼容性

testID生成优先级（从高到低）

1. 【最高优先级】手动指定的testID

原则: 保留人工干预的最高权力。如果组件已有testID或id，插件不会覆盖。

// 输入
<Button testID="custom-login-button">登录</Button>
<Button id="custom-id">登录</Button>

// 输出 (保持不变)
<Button testID="custom-login-button">登录</Button>
<Button id="custom-id">登录</Button>

2. 【核心】从有意义的属性中提取

原则: 组件的功能通常由其props定义。

// 输入
<TextInput placeholder="请输入用户名" />
<Button title="登录">Click</Button>
<Icon name="settings" />

// 输出
<TextInput placeholder="请输入用户名" testID="请输入用户名" id="请输入用户名" />
<Button title="登录" testID="登录" id="登录">Click</Button>
<Icon name="settings" testID="icon-settings" id="icon-settings" />

支持的有意义属性:

title - 标题
placeholder - 占位符
label - 标签
alt - 替代文本
name - 名称（会添加组件类型前缀）
id - 标识符
key - 键值
accessibilityLabel - 无障碍标签

3. 【核心】从组件内容中提取（智能处理多语言）

原则: 组件的内容（children）是其最直观的语义。

静态文本

// 输入
<Button>登录</Button>

// 输出
<Button testID="登录" id="登录">登录</Button>

国际化（i18n）文本

关键优化: 插件不执行t函数，而是直接提取翻译Key，这个Key是稳定且极具语义的。

// 输入
<Text>{t('user.profile.nickname')}</Text>
<Button>{i18n.t('common.save')}</Button>

// 输出
<Text testID="user.profile.nickname" id="user.profile.nickname">{t('user.profile.nickname')}</Text>
<Button testID="common.save" id="common.save">{i18n.t('common.save')}</Button>

4. 【最低优先级】回退到基于组件名的层级结构

原则: 作为保底方案，确保所有元素至少有一个可用的ID。

// 输入
function ProfileScreen() {
  return (
    <View>
      <Button />
    </View>
  );
}

// 输出
function ProfileScreen() {
  return (
    <View>
      <Button testID="ProfileScreen-Button" id="ProfileScreen-Button" />
    </View>
  );
}

安装

npm install babel-plugin-react-native-testid --save-dev
# 或
yarn add babel-plugin-react-native-testid --dev

使用方法

基本配置

在你的.babelrc或babel.config.js中添加插件：

{
  "plugins": ["babel-plugin-react-native-testid"]
}

默认情况下，插件会同时添加testID和id属性。

高级配置

// babel.config.js
module.exports = {
  plugins: [
    [
      'babel-plugin-react-native-testid',
      {
        // 要添加的属性名称
        attributes: ['testID'],
        
        // 层级分隔符
        delimiter: '-',
        
        // 忽略的元素（不会生成testID）
        ignoreElements: ['View', 'Text', 'Image'],
        
        // 有意义的属性
        meaningfulAttributes: ['title', 'placeholder', 'label', 'customLabel']
      }
    ]
  ]
};

配置选项

选项	类型	默认值	说明
`attributes`	`string[]`	`['testID', 'id']`	要添加的属性名称
`delimiter`	`string`	`'-'`	层级分隔符
`ignoreElements`	`string[]`	`['View', 'Text', 'Image', ...]`	忽略的元素列表
`meaningfulAttributes`	`string[]`	`['title', 'placeholder', ...]`	有意义的属性列表

实际应用示例

Detox测试

// 测试代码
await element(by.id('请输入用户名')).typeText('testuser');
await element(by.id('user.profile.nickname')).tap();
await element(by.id('登录')).tap();

多语言应用

// 组件代码
function LoginScreen() {
  return (
    <View>
      <TextInput placeholder={t('login.username.placeholder')} />
      <TextInput placeholder={t('login.password.placeholder')} />
      <Button>{t('login.submit')}</Button>
    </View>
  );
}

// 生成的testID和id
// testID="login.username.placeholder" id="login.username.placeholder"
// testID="login.password.placeholder" id="login.password.placeholder"
// testID="login.submit" id="login.submit"

与您的XML输出对比

根据您提供的XML视图层次结构，这个插件可以帮助生成更有意义的testID：

<!-- 当前: 缺少testID -->
<RCTView alpha="1.0" class="RCTView" focused="false" height="30" id="EnhancedTouchable-Component" label="登录" visibility="visible" width="62" x="198" y="0">
  <RCTTextView alpha="1.0" class="RCTTextView" focused="false" height="21" id="ReText-RNText" label="登录" visibility="visible" width="30" x="16" y="4" />
</RCTView>

<!-- 使用插件后: 自动生成有意义的testID -->
<RCTView testID="登录" alpha="1.0" class="RCTView" focused="false" height="30" id="EnhancedTouchable-Component" label="登录" visibility="visible" width="62" x="198" y="0">
  <RCTTextView testID="登录" alpha="1.0" class="RCTTextView" focused="false" height="21" id="ReText-RNText" label="登录" visibility="visible" width="30" x="16" y="4" />
</RCTView>

许可证

MIT

贡献

欢迎提交Issue和Pull Request！