如何在React与E2E测试项目间共享data-test-id常量JSON文件

针对你React前端和E2E测试仓库分离，需要共享data-test-id常量文件且保持版本一致的需求，以下是几个可行方案，替代Git子模块的不便：

方案1：使用Git Subtree实现双向同步 #

Git Subtree比子模块更适合共享单个文件/目录，支持双向读写，版本同步更直观。

操作步骤： #

1. 在主仓库（比如前端仓库）维护常量文件：
   创建单独目录（如shared/test-ids/）存放test-ids.json，确保该文件在前端仓库的Git管理下。
2. 在E2E仓库添加前端仓库为远程源：

   git remote add frontend-upstream <你的前端仓库Git地址>
   

3. 拉取前端仓库的常量目录到E2E仓库：

   git subtree add --prefix shared/test-ids frontend-upstream main --squash
   

   （--squash会合并提交记录，避免E2E仓库出现大量前端仓库的历史提交）
4. 同步更新：
   • 前端仓库修改常量文件后，E2E仓库拉取更新：

     git subtree pull --prefix shared/test-ids frontend-upstream main --squash
     

   • E2E仓库修改常量文件后，推回前端仓库：

     git subtree push --prefix shared/test-ids frontend-upstream main
     

方案2：发布私有npm包到Gitlab Package Registry #

把常量文件封装成私有npm包，通过版本管理确保两个仓库使用同一版本的常量，依赖关系清晰。

操作步骤： #

1. 创建npm包结构：
   在前端仓库（或单独在某仓库）创建如下结构：

   test-ids-pkg/
   ├── test-ids.json
   └── package.json
   

   package.json配置示例：

   {
     "name": "@your-gitlab-group/test-ids",
     "version": "1.0.0",
     "private": true,
     "main": "test-ids.json",
     "publishConfig": {
       "@your-gitlab-group:registry": "https://gitlab.com/api/v4/projects/<你的项目ID>/packages/npm/"
     }
   }
   

2. 配置Gitlab npm认证：
   在本地~/.npmrc添加Gitlab Registry的认证信息（从Gitlab项目设置的Package Registry获取）：

   @your-gitlab-group:registry=https://gitlab.com/api/v4/projects/<项目ID>/packages/npm/
   //gitlab.com/api/v4/projects/<项目ID>/packages/npm/:_authToken=<你的Gitlab访问令牌>
   

3. 发布包：
   每次修改test-ids.json后，更新版本号并发布：

   npm version patch # 按需求用minor/major升级版本
   npm publish
   

4. 在两个仓库安装使用：
   • React前端引入：

     import testIds from '@your-gitlab-group/test-ids';
     // 使用示例：<button data-test-id={testIds.login.submit}>提交</button>
     

   • Selenium E2E测试引入：

     const testIds = require('@your-gitlab-group/test-ids');
     // 使用示例：driver.findElement(By.css(`[data-test-id="${testIds.login.submit}"]`))
     

方案3：Gitlab CI/CD自动同步文件 #

通过CI脚本实现两个仓库间常量文件的自动同步，无需手动执行Git命令。

操作步骤： #

1. 创建Gitlab访问令牌：
   在Gitlab中生成一个具有项目读写权限的访问令牌，分别在前端和E2E仓库的CI/CD变量中添加SYNC_TOKEN（变量类型设为"掩码"）。
2. 前端仓库CI同步到E2E仓库：
   在前端仓库的.gitlab-ci.yml中添加同步任务：

   sync-test-ids-to-e2e:
     stage: sync
     only:
       changes:
         - test-ids.json # 仅当常量文件修改时触发
     script:
       - git clone https://oauth2:$SYNC_TOKEN@gitlab.com/your-group/e2e-repo.git
       - cp test-ids.json e2e-repo/
       - cd e2e-repo
       - git config user.name "CI Sync Bot"
       - git config user.email "ci-sync@your-group.com"
       - git add test-ids.json
       - git commit -m "Sync test-ids.json from frontend repo [skip ci]"
       - git push
   

3. E2E仓库CI同步到前端仓库：
   在E2E仓库的.gitlab-ci.yml中添加反向同步任务：

   sync-test-ids-to-frontend:
     stage: sync
     only:
       changes:
         - test-ids.json
     script:
       - git clone https://oauth2:$SYNC_TOKEN@gitlab.com/your-group/frontend-repo.git
       - cp test-ids.json frontend-repo/
       - cd frontend-repo
       - git config user.name "CI Sync Bot"
       - git config user.email "ci-sync@your-group.com"
       - git add test-ids.json
       - git commit -m "Sync test-ids.json from E2E repo [skip ci]"
       - git push
   

   （[skip ci]避免同步提交触发CI循环）

关于Git子模块无效的说明 #

Git子模块更适合关联独立的完整仓库，对于单个文件的共享场景，子模块容易出现"忘记更新子模块版本"的问题，导致前端和E2E仓库使用的常量版本不一致。上述方案更贴合单个共享文件的需求，且维护成本更低。

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