angular 离子存储的开玩笑测试失败

Question

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

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

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

Cannot find module '@ionic/storage' from '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 是商店服务，我将用存根替换它；

正在测试 env 到 repo 错误 package.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 os osx 11.2.2

Answer 1

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

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

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

Answer 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"]
};

angular 离子存储的开玩笑测试失败

Jest testing with angular ionic storage is failing

jestjs

ionic5

ts-jest

angular11