使用角离子存储的开玩笑测试失败答案

【问题标题】：Jest testing with angular ionic storage is failing使用角离子存储的开玩笑测试失败
【发布时间】：2021-08-18 15:30:34
【问题描述】：

您好，我正在使用 angular 11 和 ionic 5；

对于离子存储，我使用@ionic/storage-angular:^3.0.6 模块。

在开玩笑的单元测试中，我得到了

找不到模块“@ionic/storage” 'node_modules/@ionic/storage-angular/bundles/ionic-storage-angular.umd.js'

@ionic/storage-angular 是我模拟的一项服务的依赖项

jest.confi.js 有

transformIgnorePatterns: [
    './node_modules/(?!@ionic|ngx-socket-io/|!@ionic/storage-angular)'
]

模拟服务的规范文件

let storeServiceStub={
  get:jest.fn().mockResolvedValue({})
};

await TestBed.configureTestingModule({
      declarations: [ DataSyncComponent ],
      providers:[
        { provide: StoreService, useValue: storeServiceStub },
      ]
})
.compileComponents();

@ionic/storage-angular 是一种存储服务，我将用存根替换；

测试环境以回购错误包.json

dependencies:{
  ...
  "@ionic/storage-angular": "^3.0.6",
  ...
}
devDependencies:{
  ...
  "jest": "^27.0.3",
  "jest-preset-angular": "^9.0.1",
  "@types/jest": "^26.0.23",
  ...

}

节点 v 14 操作系统 osx 11.2.2

【问题讨论】：

标签： jestjs ionic5 ts-jest angular11

【解决方案1】：

在 jest.config.js 中为 @ionic/storage 提供 jest moduleNameMapper，如下所示：

    ...,
    transformIgnorePatterns: [
      './node_modules/(?!@ionic|ngx-socket-io/|!@ionic/storage-angular)'
    ],
    "moduleNameMapper": {
      "@ionic/storage": "<rootDir>/node_modules/@ionic/storage/dist/esm"
    }

您可以找到有关 moduleNameMapper here 的更多信息。

【讨论】：

我试过这个我得到`SyntaxError: Cannot use import statement outside a module for a localforge which is dependency of @ionic/storage-angular`

【解决方案2】：

我可以通过在我的 jest.config.js 中添加以下配置来修复它

moduleNameMapper: {
        '^@ionic/storage': '<rootDir>/node_modules/@ionic/storage/dist/esm/index.d.ts',
    },

与@Ferraria 的回答非常相似。但模块名称以字符 ^ 开头，路径以 index.d.ts 结尾。

我的完整配置是

module.exports = {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": ["<rootDir>/setup-jest.ts"],
    "transformIgnorePatterns": [
        "node_modules/(?!@ngrx|@ionic-native|@ionic)"
    ],
    moduleNameMapper: {
        '^@ionic/storage': '<rootDir>/node_modules/@ionic/storage/dist/esm/index.d.ts',
    },
    setupFiles: ["jest-canvas-mock"]
};

【讨论】：