Angular 7 Nx项目集成Cypress遇TypeScript问题求配置方案

我之前维护Angular 7的Nx项目时，也踩过Cypress集成的TypeScript配置坑，给你一套经过实际验证的配置结构，应该能解决你的问题：

1. 安装兼容依赖 #

首先要安装适配Angular 7和Nx的对应版本依赖，版本匹配是关键，避免兼容性冲突：

# 安装适配Angular7的Cypress核心包
npm install cypress@3.8.3 --save-dev
# Nx官方Cypress插件（对应Nx 8.x版本，适配Angular7）
npm install @nrwl/cypress@8.12.11 --save-dev
# Webpack预处理器与TypeScript loader
npm install @cypress/webpack-preprocessor@4.1.0 ts-loader@6.2.2 --save-dev

2. TypeScript 配置调整 #

项目根目录 tsconfig.json #

确保根TS配置包含Cypress所需类型，同时保留原有Angular项目配置：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"],
    "types": ["cypress"] // 新增Cypress全局类型
  },
  "exclude": ["node_modules", "tmp"]
}

E2E目录下的 tsconfig.e2e.json #

在你的e2e应用目录（比如apps/your-app-e2e）下，创建/修改该配置：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "types": ["cypress", "node"],
    "isolatedModules": false,
    "noEmit": true
  },
  "include": ["**/*.ts"]
}

3. Webpack 配置（e2e目录） #

在apps/your-app-e2e下创建webpack.config.js，用于Cypress处理TypeScript测试文件：

const path = require('path');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [node_modules],
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.e2e.json')
            }
          }
        ]
      }
    ]
  }
};

4. Nx 项目配置调整（angular.json） #

找到你的e2e项目配置节点，更新architect下的Cypress配置：

"apps": {
  "your-app-e2e": {
    "root": "apps/your-app-e2e",
    "sourceRoot": "apps/your-app-e2e/src",
    "projectType": "application",
    "architect": {
      "cypress": {
        "builder": "@nrwl/cypress:cypress",
        "options": {
          "cypressConfig": "apps/your-app-e2e/cypress.json",
          "tsConfig": "apps/your-app-e2e/tsconfig.e2e.json",
          "devServerTarget": "your-app:serve"
        },
        "configurations": {
          "production": {
            "devServerTarget": "your-app:serve:production"
          }
        }
      },
      "lint": {
        // 保留原有lint配置即可
      }
    }
  }
}

同时确保apps/your-app-e2e/cypress.json配置正确：

{
  "baseUrl": "http://localhost:4200",
  "pluginsFile": "apps/your-app-e2e/plugins/index.js"
}

5. Cypress插件配置（plugins/index.js） #

在apps/your-app-e2e/plugins/index.js中引入Webpack预处理器：

const webpack = require('@cypress/webpack-preprocessor');
const webpackConfig = require('../webpack.config.js');

module.exports = (on, config) => {
  const options = {
    webpackOptions: webpackConfig,
    watchOptions: {}
  };
  on('file:preprocessor', webpack(options));
  return config;
};

6. 验证配置 #

运行以下命令启动Cypress，验证配置是否生效：

nx e2e your-app-e2e

如果配置正确，Cypress窗口会正常弹出，你可以编写并执行测试用例了。

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