Angular 17单元测试报错：Cannot read properties of undefined (reading 'module')

问题根源 #

错误直接来自你的webpack.config.js配置，其中的webpack.ProvidePlugin和resolve.alias设置在Karma测试环境（浏览器运行）中与Node.js模块系统冲突：

• ProvidePlugin试图将require映射到['module', 'require']，但浏览器环境不存在全局module对象，导致解析失败
• resolve.alias中把require指向undefined，进一步干扰了测试环境的模块解析逻辑
• 针对Node.js模块（如fs、path）的externals配置在浏览器测试环境中完全不需要，反而会引发解析错误

解决步骤 #

1. 移除冲突的Webpack插件和别名配置 #

修改webpack.config.js，删除ProvidePlugin和错误的require别名，同时移除测试环境不需要的Node模块externals：

const webpack = require("webpack");

module.exports = {
    target: 'web',
    resolve: {
        fallback: {
            "tty": require.resolve("tty-browserify")
        }
    }
};

2. 为测试环境单独配置Webpack（可选） #

如果开发/生产环境需要保留原Webpack配置，建议创建测试专用的Webpack配置文件（如webpack.test.config.js），然后在angular.json的测试配置中指定该文件：

"test": {
    "builder": "@angular-builders/custom-webpack:karma",
    "options": {
        "customWebpackConfig": {
            "path": "./webpack.test.config.js"
        },
        // 其他配置保持不变
    }
}

测试专用配置只保留测试必需的设置（如tty fallback），完全排除Node.js相关的externals和插件。

3. 验证TS测试配置 #

检查tsconfig.spec.json，确保配置符合浏览器测试环境：

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/spec",
        "types": [
            "jasmine",
            "node"
        ],
        "lib": [
            "ES2022",
            "dom"
        ]
    },
    "include": [
        "src/**/*.spec.ts",
        "src/**/*.d.ts"
    ]
}

4. 尝试禁用自定义Webpack（快速验证） #

如果不确定自定义配置是否必要，可以临时修改angular.json的测试配置，使用Angular默认的Karma构建器：

"test": {
    "builder": "@angular-devkit/build-angular:karma",
    // 移除customWebpackConfig配置，其他保持不变
}

运行yarn test验证是否能正常执行，如果可以，再逐步添加必要的自定义配置，避免引入Node.js环境相关的设置。

额外提示 #

• Angular 17的默认测试环境是浏览器（Karma），不需要模拟Node.js的module或require对象
• 如果你的代码中依赖Node.js模块（如fs），需要在测试中使用mock替代真实模块，而不是通过Webpack配置强行引入
• 当使用@angular-builders/custom-webpack时，确保测试配置与开发/生产配置的隔离，避免环境冲突

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