Question

我想在我的angular（v10）项目中将Jest用作测试运行器。因此，我按照设置说明进行操作，并在项目中添加了jest和jest-preset-angular。到目前为止，它工作正常，但是由于该错误，有些测试失败了：

TypeError：无法将属性'fillStyle'设置为null

这是在 lotti.js npm软件包中发生的： node_modules/lottie-web/build/player/lottie.js:4378:23

var proxyImage = (function(){
    var canvas = createTag('canvas');
    canvas.width = 1;
    canvas.height = 1;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgba(0,0,0,0)';
    ctx.fillRect(0, 0, 1, 1);
    return canvas;
}())

谷歌的快速研究提出了以下答案： Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

它指出，在jsdom中没有画布对象，因为没有真正的浏览器。我感觉合理。因此，我尝试安装https://www.npmjs.com/package/jest-canvas-mock并在jest配置中添加'setupFiles：[“ jest-canvas-mock”]'到我的jest配置中。

jest.config.js：

const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig');

module.exports = {
  preset: 'jest-preset-angular',
  roots: ['<rootDir>/src/'],
  testMatch: ['**/+(*.)+(spec).+(ts)'],
  setupFiles: ["jest-canvas-mock"],
  setupFilesAfterEnv: ['<rootDir>/src/test.ts'],
  collectCoverage: true,
  coverageReporters: ['html'],
  coverageDirectory: 'coverage/my-app',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
    prefix: '<rootDir>/'
  })
};

添加此配置后，出现新错误，我一无所知：

.../node_modules/webtrekk-smart-pixel-angular/index.js:5
import WebtrekkSmartPixelAngular from "./lib/smart-pixel-angular";
       ^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
  at node_modules/some-lib/bundles/some-lib.umd.js:2:534
  at Object.<anonymous> (node_modules/some-lib/bundles/some-lib.umd.js:5:2)

如何在一个有角度的应用程序中以开玩笑的方式支持这个画布呢？

附录： package.json：

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --crossOrigin=use-credentials",
    "test": "npx jest",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "10.1.0",
    "@angular/cdk": "10.1.0",
    "@angular/common": "10.1.0",
    "@angular/compiler": "10.1.0",
    "@angular/core": "10.1.0",
    "@angular/forms": "10.1.0",
    "@angular/platform-browser": "10.1.0",
    "@angular/platform-browser-dynamic": "10.1.0",
    "@angular/router": "10.1.0",
    "@ngrx/effects": "10.0.0",
    "@ngrx/entity": "10.0.0",
    "@ngrx/router-store": "10.0.0",
    "@ngrx/store": "10.0.0",
    "@ngrx/store-devtools": "10.0.0",
    "primeng": "9.0.2",
    "company-dependency": "1.0.0",
    "rxjs": "6.5.4",
    "tslib": "2.0.0",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.1001.0",
    "@angular/cli": "10.1.0",
    "@angular/compiler-cli": "10.1.0",
    "@ngrx/schematics": "10.0.0",
    "@types/jasmine": "3.5.0",
    "@types/jasminewd2": "2.0.3",
    "@types/jest": "26.0.15",
    "@types/node": "12.11.1",
    "codelyzer": "5.1.2",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "5.0.0",
    "jest": "26.6.3",
    "jest-preset-angular": "8.3.2",
    "protractor": "7.0.0",
    "ts-node": "8.3.0",
    "tslint": "6.1.0",
    "typescript": "4.0.2"
  }
}

TypeError：无法将属性'fillStyle'设置为null

0 个答案: