Jest 和 Serialize-ts Count 字段的查找类型：

Question

将 jest 升级到 v9 后，我在 angular 应用程序中使用 jest 进行运行测试时遇到问题

错误是：

Count find type for field: amount

      4 | export class Price {
      5 |   @Field()
    > 6 |   amount: number;
        |   ^
      7 |
      8 |   @Field()
      9 |   currency: string;

      at getSerializerForType (../../node_modules/serialize-ts/dist/decorators/type.decorator.js:29:15)
      at getSerializerFromParams (../../node_modules/serialize-ts/dist/decorators/type.decorator.js:20:12)
      at ../../node_modules/serialize-ts/dist/decorators/type.decorator.js:10:26
      at ../../node_modules/serialize-ts/dist/decorators/field.decorator.js:16:46
      at DecorateProperty (../../node_modules/reflect-metadata/Reflect.js:553:33)
      at Object.decorate (../../node_modules/reflect-metadata/Reflect.js:123:24)
      at Object.__decorate (../../node_modules/tslib/tslib.js:96:96)
      at src/app/modules/product/models/price.model.ts:6:3
      at Object.<anonymous> (src/app/modules/product/models/price.model.ts:4:1)
      at Object.<anonymous> (src/app/modules/product/models/offer.model.ts:1:1)
      at Object.<anonymous> (src/app/modules/product/models/index.ts:1:1)
      at Object.<anonymous> (src/app/modules/product/pipes/thumbnail.pipe.spec.ts:6:1)

price.model.ts:

import { Field, Model } from 'serialize-ts';

@Model()
export class Price {
  @Field()
  amount: number;

  @Field()
  currency: string;
}

这是我的第一个 jest.config.js:

module.exports = {
  preset: "../../jest.config.js",
  coverageDirectory: "../../coverage/",
  collectCoverage: true,
  coverageReporters: [
    'text',
    'text-summary',
    'lcov',
  ],
  moduleNameMapper: {
    '^~shared/(.*)$': '<rootDir>/src/app/shared/',
    '^~app/(.*)$': '<rootDir>/src/app/',
    '^~core/(.*)$': '<rootDir>/src/app/core/',
    '^~env/environment(.*)$': '<rootDir>/src/environments/environment.testing.ts',
  },
  collectCoverageFrom: [
    // included
    '**/src/app/**/{store,services,pipes,utils}/*.{js,ts}',

    // excluded
    '!**/src/app/**/index.{js,ts}',
    '!**/src/app/**/*.{mock,enum,constants,component,module,interceptors,constant,guard,class,directive,model,helper,animations}.{js,ts}',
    '!**/node_modules/**',
  ],
  snapshotSerializers: [
    "jest-preset-angular/build/AngularSnapshotSerializer.js",
    "jest-preset-angular/build/HTMLCommentSerializer.js"
  ],
  setupFilesAfterEnv: ['./src/test-setup.ts']
};

扩展了这个 jest.config.js:

module.exports = {
  testMatch: ['**/+(*.)+(spec|test).+(ts|js|tsx)?(x)'],
  transform: {
    '^.+\.(ts|js|html|tsx)$': 'ts-jest'
  },
  resolver: '@nrwl/jest/plugins/resolver',
  moduleFileExtensions: ['ts', 'js', 'html', 'tsx'],
  collectCoverage: true,
  coverageReporters: ['html'],
  preset: 'jest-preset-angular'
};

我的package.json:


  "devDependencies": {
    "@angular-builders/jest": "9.0.1",
    "@angular-devkit/build-angular": "~0.901.9",
    "@angular/cli": "9.1.9",
    "@angular/compiler-cli": "9.1.11",
    "@angular/language-service": "9.1.11",
    "@angular/platform-server": "9.1.11",
    "@ngrx/schematics": "9.2.0",
    "@nrwl/jest": "9.5.1",
    "@nrwl/workspace": "^9.5.1",
    "eslint": "6.1.0",
    "jest": "26.1.0",
    "jest-preset-angular": "8.2.1",
    "prettier": "^2.0.4",
    "ts-jest": "26.1.1",
    "tslint": "5.11.0",
    "typescript": "3.8.3"
  }

和我的 test-setup.ts:

import 'jest-preset-angular';

Answer 1

jest-preset-angular 使用它自己的反射包，它只适用于 Angular 装饰器。一旦你想使用另一个带有装饰器的包，你应该包含一个功能完整的 Reflect-Metadata 包，例如包 core-js.

提供的

为此，在将 jest-preset-angular 导入到您的 setupFilesAfterEnv 文件之前添加 Reflect-Metadata-Polyfills（此文件通常称为 src/setupJest.ts 或 src/test-setup.ts，这里是 core-js@3):

require('core-js/es7/reflect');
require('core-js/proposals/reflect-metadata');
import `jest-preset-angular`;

Jest 和 Serialize-ts Count 字段的查找类型：

Jest and Serialize-ts Count find type for field:

serialization

typescript

jestjs

angular

jest-preset-angular