"Test suite failed to run: TypeError: window.URL.createObjectURL is not a function"

Hi Plotly Team,

I am using Plotly on Angular 9 in order to create some data vizs, but running into an issue when using Jest to test a component (very basic unit test) that imports the Plotly.js library to be used like so:

  async generateThumbnail(graph: any, height: number, width: any): Promise<any> {
    return await Plotly.toImage(await Plotly.newPlot('plot' as any, graph.data, graph.layout), { height, width, format: 'png' });
  }

The child (thumbnail service) and parent (dashboard) components that directly and indirectly call Plotly when testing, throw: ● Test suite failed to run

TypeError: window.URL.createObjectURL is not a function

  1 | import { Injectable } from '@angular/core';
> 2 | import * as Plotly from 'plotly.js';
    | ^
  3 | @Injectable({
  4 |   providedIn: 'root'
  5 | })

  at define (node_modules/mapbox-gl/dist/mapbox-gl.js:24:37)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:33:1
  at node_modules/mapbox-gl/dist/mapbox-gl.js:3:81
  at Object.<anonymous> (node_modules/mapbox-gl/dist/mapbox-gl.js:6:2)
  at Object.<anonymous> (node_modules/plotly.js/src/plots/mapbox/index.js:11:16)
  at Object.<anonymous> (node_modules/plotly.js/src/traces/scattermapbox/index.js:31:21)
  at Object.<anonymous> (node_modules/plotly.js/lib/scattermapbox.js:11:18)
  at Object.<anonymous> (node_modules/plotly.js/lib/index.js:54:5)
  at Object.<anonymous> (src/app/core/services/thumbnail.service.ts:2:1)
  at Object.<anonymous> (src/app/core/services/thumbnail.service.spec.ts:3:1)

and,

● Test suite failed to run

TypeError: window.URL.createObjectURL is not a function

  1 | import { Injectable } from '@angular/core';
> 2 | import * as Plotly from 'plotly.js';
    | ^
  3 | @Injectable({
  4 |   providedIn: 'root'
  5 | })

  at define (node_modules/mapbox-gl/dist/mapbox-gl.js:24:37)
  at node_modules/mapbox-gl/dist/mapbox-gl.js:33:1
  at node_modules/mapbox-gl/dist/mapbox-gl.js:3:81
  at Object.<anonymous> (node_modules/mapbox-gl/dist/mapbox-gl.js:6:2)
  at Object.<anonymous> (node_modules/plotly.js/src/plots/mapbox/index.js:11:16)
  at Object.<anonymous> (node_modules/plotly.js/src/traces/scattermapbox/index.js:31:21)
  at Object.<anonymous> (node_modules/plotly.js/lib/scattermapbox.js:11:18)
  at Object.<anonymous> (node_modules/plotly.js/lib/index.js:54:5)
  at Object.<anonymous> (src/app/core/services/thumbnail.service.ts:2:1)
  at Object.<anonymous> (src/app/pages/dashboard/dashboard.component.ts:6:1)
  at Object.<anonymous> (src/app/pages/dashboard/dashboard.component.spec.ts:3:1)

We imported Plotly as import * as Plotly from 'plotly.js' and used the angular.json script setup for accessing the package (which works for giving us access to the Plotly Obj and methods on the thumbnail service): "scripts": [ "node_modules/plotly.js/dist/plotly.min.js" ]

We tried installing jest-canvas-mock, following this thread thread We tried jest fn mocking the service that imports the Plotly package. We tried mocking both getContext and createObjectURL in our setupJest.ts file with empty returns:

window.URL.createObjectURL = (): any => { };
HTMLCanvasElement.prototype.getContext = (): any => { };

We included the angular-jest-preset astTransformers and other mentions found here: Stack Overflow failed to load component html issue Here are other potentially relevant files: tsconfig.ts:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2018",
      "dom"
    ],
    "types": [
      "jest"
    ],
    "esModuleInterop": true
  },
  "resolveJsonModule": true,
  "allowSyntheticDefaultImports": true,
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

jest.config.ts:

module.exports = {
  collectCoverage: true,
  coverageReporters: [
    'text-summary',
    'html'
  ],
  reporters: [
    "default",
    [
      "jest-stare",
      {
        "resultDir": "test-results/",
        "reportTitle": "FCM Test Results",
        "reportHeadline": "FCM Test Results",
        "additionalResultsProcessors": [
          "jest-junit"
        ],
        "coverageLink": "coverage/index.html",
      }
    ]
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
  coverageDirectory: 'test-results/coverage/'
};

package.json:

"dependencies": {
    "@angular/animations": "~9.1.1",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.1.1",
    "@angular/compiler": "~9.1.1",
    "@angular/core": "~9.1.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.1.1",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.1.1",
    "@angular/platform-browser-dynamic": "~9.1.1",
    "@angular/router": "~9.1.1",
    "@types/jsdom": "^16.2.3",
    "@types/plotly.js": "^1.50.9",
    "angular-plotly.js": "^2.0.0",
    "d3": "^5.15.1",
    "jest-canvas-mock": "^2.2.0",
    "ls": "^0.2.1",
    "plotly.js": "^1.54.1",
    "plotly.js-dist": "^1.54.1",
    "rxjs": "~6.5.4",
    "ts-jest": "^25.4.0",
    "tslib": "^1.10.0",
    "ui-components": "file:../../ui-components/dist/ui-components/ui-components-0.0.1.tgz",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/jest": "^9.0.1",
    "@angular-devkit/build-angular": "^0.901.7",
    "@angular/cli": "~9.1.1",
    "@angular/compiler-cli": "~9.1.1",
    "@angular/language-service": "~9.1.1",
    "@types/d3": "^5.7.2",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "^25.2.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jest": "^25.5.4",
    "jest-preset-angular": "^8.1.3",
    "jest-stare": "^2.0.0",
    "merge": "^1.2.1",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3",
    "yaml": "^1.10.0"
  }

thumbnail.service.ts:

import { Injectable } from '@angular/core';
import * as Plotly from 'plotly.js';
@Injectable({
  providedIn: 'root'
})
export class ThumbnailsService {
  constructor() { }
  async generateThumbnail(graph: any, height: number, width: any): Promise<any> {
    return await Plotly.toImage(await Plotly.newPlot('plot' as any, graph.data, graph.layout), { height, width, format: 'png' });
  }
}

thumbnail.service.spec:

  import { TestBed } from '@angular/core/testing';
  import { ThumbnailsService } from './thumbnail.service';

   describe('ThumbnailService', () => {
       let service: ThumbnailsService;

     beforeEach(() => {
       TestBed.configureTestingModule({});
       service = TestBed.inject(ThumbnailsService);
      });

     it('should be created', () => {
       expect(service).toBeTruthy();
      });
  });

plotly / plotly.js

"Test suite failed to run: TypeError: window.URL.createObjectURL is not a function" #5002