如何程序化提取React Native项目组件？求检测testID缺失的脚本

一、现成工具方案：ESLint插件/规则 #

ESLint是React Native项目中常用的代码检查工具，你可以通过自定义规则或社区插件自动检测缺失testID的组件：

• 自定义ESLint规则：编写规则遍历JSX元素，检查指定组件是否包含testID属性。这种方式能自定义检查范围（比如只针对View、TouchableOpacity等交互/展示组件），还能集成到CI流程，在代码提交前拦截问题。
• 社区插件：部分社区维护的ESLint插件内置了类似检测逻辑，安装后配置对应规则即可实现自动扫描。

二、自定义扫描脚本 #

如果需要更灵活的控制逻辑，可基于Node.js结合AST解析工具编写自定义脚本，步骤如下：

1. 安装依赖 #

先安装AST解析相关的包：

npm install @babel/parser @babel/traverse --save-dev

2. 编写扫描脚本 #

创建check-testids.js文件，内容如下：

const fs = require('fs');
const path = require('path');
const { parse } = require('@babel/parser');
const traverse = require('@babel/traverse').default;

// 配置项目源码目录和需要检查的组件类型
const PROJECT_ROOT = './src';
const TARGET_COMPONENTS = ['View', 'Text', 'TouchableOpacity', 'Button', 'TextInput'];

const missingTestIDs = [];

// 递归遍历项目目录
function walkDir(dir) {
  const files = fs.readdirSync(dir);
  for (const file of files) {
    const fullPath = path.join(dir, file);
    const stats = fs.statSync(fullPath);
    if (stats.isDirectory()) {
      walkDir(fullPath);
    } else if (/\.(jsx?|tsx?)$/.test(file)) {
      checkComponentTestID(fullPath);
    }
  }
}

// 检查单个文件中的组件testID
function checkComponentTestID(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  try {
    const ast = parse(content, {
      sourceType: 'module',
      plugins: ['jsx', 'typescript'], // 兼容JSX和TSX文件
    });

    traverse(ast, {
      JSXOpeningElement(path) {
        const componentName = path.node.name.name || path.node.name.type;
        // 跳过非目标组件
        if (!TARGET_COMPONENTS.includes(componentName)) return;

        // 检查是否存在testID属性
        const hasTestID = path.node.attributes.some(attr => {
          return attr.name?.name === 'testID';
        });

        if (!hasTestID) {
          missingTestIDs.push({
            filePath,
            component: componentName,
            line: path.node.loc.start.line,
          });
        }
      },
    });
  } catch (err) {
    console.error(`解析文件失败: ${filePath}，错误信息: ${err.message}`);
  }
}

// 执行扫描并输出结果
walkDir(PROJECT_ROOT);

console.log('\n=== 缺失testID的组件列表 ===');
if (missingTestIDs.length === 0) {
  console.log('所有指定组件均已配置testID！');
} else {
  missingTestIDs.forEach(item => {
    console.log(`文件: ${item.filePath}\n组件: ${item.component}\n行号: ${item.line}\n`);
  });
}

3. 运行脚本 #

在项目根目录执行命令启动扫描：

node check-testids.js

三、集成到开发流程 #

无论是ESLint方案还是自定义脚本，都可以集成到：

• Git钩子（如husky）：在代码提交前自动检查，阻止不符合要求的代码提交
• CI/CD流程：在构建阶段执行检查，确保线上代码符合规范

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