如何为现有NX monorepo仓库添加符合规范的e2e测试项目

操作全程在仓库根目录（MyApp目录）下执行：

• 初始化NX工作区配置
  执行命令：

  npx nx@latest init
  

  按照交互提示选择你项目对应的技术栈即可，初始化过程只会新增NX所需的配置文件，不会改动现有FrontEndRepo、BackEndRepo里的业务代码。

• 将现有前后端项目注册为NX可识别的应用

  • 前端是create-react-app创建的React项目，执行：

    npx nx g @nx/react:application FrontEndRepo
    

    交互过程中如果提示目标目录已存在，选择跳过文件覆盖选项，NX只会自动补全项目所需的project.json等配置文件，不会修改你已写的React业务代码。
  • 后端项目根据自身技术栈选择对应生成器即可，比如Nest项目用@nx/nest:application、Express项目用@nx/node:application，执行逻辑和前端一致，遇到目录已存在就跳过覆盖，完成项目注册。

• 生成符合规范的独立e2e项目
  NX的e2e生成器执行后会自动在根目录创建和对应应用同级的[应用名]-e2e目录，完全匹配约定的目录结构：

  • 给前端项目生成e2e（默认用Cypress作为测试框架），执行：

    npx nx g @nx/cypress:e2e-project FrontEndRepo-e2e --project=FrontEndRepo
    

    执行完成后根目录会自动出现FrontEndRepo-e2e文件夹，内置基础测试配置、示例用例，且自动关联前端项目的启动、构建依赖，不需要手动改配置。
  • 给后端项目生成e2e，根据测试框架选择对应生成器即可：如果用Cypress做接口测试就用和前端一样的cypress生成器，如果用Jest做接口测试就执行npx nx g @nx/jest:project BackEndRepo-e2e --project=BackEndRepo，生成后会自动出现同级的BackEndRepo-e2e目录。

• 校验配置有效性
  执行命令查看NX识别到的所有项目：

  npx nx show projects
  

  如果输出列表里同时包含FrontEndRepo、FrontEndRepo-e2e、BackEndRepo、BackEndRepo-e2e四个项目，再运行npx nx e2e FrontEndRepo-e2e能正常拉起前端服务、启动测试运行器，就说明配置符合要求。

注意：执行所有生成命令前建议先提交一次现有代码到版本库，避免误操作导致文件改动无法回滚。所有生成器交互时只要选择不覆盖已有业务文件，就不会影响你之前写的代码。

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