JHipster Angular单元测试无法从组件文件找到ngx-easy-table模块
问题根因
应用正常运行但单元测试报Cannot find module 'ngx-easy-table'是两个运行链路的模块解析规则不一致导致的:
- 应用启动走Angular CLI内置的Webpack构建链路,会自动转译
node_modules下的Angular生态库,可正确识别ngx-easy-table的Ivy入口配置 - JHipster 7.8.1默认用Jest跑单元测试,默认配置不会转译
node_modules下的大部分第三方库,同时未将ngx-easy-table加入模块解析白名单,无法识别库的ES模块入口,直接抛出模块找不到的错误
另外如果直接执行npm install ngx-easy-table默认会拉取最新版,最新版仅支持Angular 14+,和JHipster 7.8.1内置的Angular 13版本存在兼容问题,也会触发同类错误。
修复步骤
- 安装版本匹配的依赖
ngx-easy-table的大版本号和Angular大版本号完全对齐,先卸载现有不匹配版本,安装适配Angular 13的版本:
npm uninstall ngx-easy-table npm install ngx-easy-table@13.0.0 @angular/cdk@13.3.1 --save-exact
- 修改Jest转译白名单配置
打开测试配置文件src/test/javascript/jest.conf.js,找到transformIgnorePatterns配置项,将ngx-easy-table、@angular/cdk加入转译白名单,修改后配置参考:
transformIgnorePatterns: [ 'node_modules/(?!@angular|@ng-bootstrap|@fortawesome|@ngx-translate|ngx-infinite-scroll|ngx-easy-table|@angular/cdk)' ]
- 清理缓存重新执行测试
Jest和Angular CLI都会缓存模块解析结果,先清理缓存再跑测试:
rm -rf node_modules/.cache ./npmw test -- home.component
之前的
shared-libs.module.ts模块导出、angular.json样式引入、home.component.ts业务代码、tsconfig.json配置均不需要调整,执行完上述步骤后单测即可正常运行。
内容的提问来源于stack exchange,提问作者Marvin Frommhold
相关产品推荐
相关产品推荐

