Angular jest test bpmnModeler error

Developers Modeler
1

Hi,
I use bpmn-js in Angular, Jest used by angular for testing code, and when testing the code, an error occurs with the instantiation bpmnModeler

component.ts

import BpmnModelerfrom 'bpmn-js/lib/Modeler';

....

  ngOnInit(): void {
    this.modeler = new BpmnModeler();
  }

When you run the test, the following error is reported

 ● Test suite failed to run

    TypeError: Cannot set property '$inject' of undefined

      1 | import { Component, OnInit } from '@angular/core';
    > 2 | import BpmnModeler from 'bpmn-js/lib/Modeler';
        | ^

What should I do with it

2

Hi @tom ,

can you share a bit more details on your problem? What angular version are you using? Does it only fail while testing or also in the browser? Maybe you can also share a CodeSandbox with a reproducible error, so we can help you more efficently.

If you have not seen it already, we do have an angular example to get inspiration from: GitHub - bpmn-io/bpmn-js-example-angular: An example how to integrate bpmn-js with an Angular application.

Cheers
Martin

3

Hi @Martin ,

Ok, I share my code.

pacekage.json

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/forms": "^14.2.0",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "bpmn-js": "^10.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.2",
    "@angular/cli": "~14.2.2",
    "@angular/compiler-cli": "^14.2.0",
    "@babel/core": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "@types/jest": "^28.1.8",
    "jest": "^28.1.3",
    "jest-canvas-mock": "^2.4.0",
    "jest-preset-angular": "^12.1.0",
    "typescript": "~4.7.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ],
    "transformIgnorePatterns": [
      "/!node_modules\\/bpmn-js"
    ]
  }
}

setup-jest.ts

import 'jest-preset-angular/setup-jest';

app.component.ts

import { Component, OnInit } from '@angular/core';
import BpmnModeler from 'bpmn-js/lib/Modeler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  modeler: any;

  constructor() {}

  ngOnInit(): void {
    this.modeler = new BpmnModeler();
  }
}

app.component.spec.ts

import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [AppComponent],
    }).compileComponents();
  });

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});

Finally, run the npm run test command and test the code with jest, and the error is reported as follows:

> jest

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    TypeError: Cannot set property '$inject' of undefined

      1 | import { Component, OnInit } from '@angular/core';
    > 2 | import BpmnModeler from 'bpmn-js/lib/Modeler';
        | ^
      3 |
      4 | @Component({
      5 |   selector: 'app-root',

      at Object.<anonymous> (node_modules/diagram-js/lib/features/copy-paste/CopyPaste.js:165:18)
      at Object.<anonymous> (node_modules/diagram-js/lib/features/copy-paste/index.js:6:1)
      at Object.<anonymous> (node_modules/bpmn-js/lib/features/copy-paste/index.js:1:1)
      at Object.<anonymous> (node_modules/bpmn-js/lib/features/replace/index.js:1:1)
      at Object.<anonymous> (node_modules/bpmn-js/lib/features/popup-menu/index.js:2:1)
      at Object.<anonymous> (node_modules/bpmn-js/lib/features/context-pad/index.js:6:1)
      at Object.<anonymous> (node_modules/bpmn-js/lib/Modeler.js:20:1)
      at Object.<anonymous> (src/app/app.component.ts:2:1)
      at Object.<anonymous> (src/app/app.component.spec.ts:3:1)
      at fulfilled (node_modules/tslib/tslib.js:115:62)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        173.984 s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test-app@0.0.0 test: `jest`
npm ERR! Exit status 1
4

Hi, I use bpmn-js in Angular, Jest used by angular for testing code, and when testing the code, an error occurs with the instantiation … I’m getting error while cps-tester.co configuring jest in my angular project error is enter image description here. till now i have configured some steps … Specifically getting an error simlar to this one: Error: Failed: "Failed to load gridsterPreview.css" when running tests with Jest on an app …

5

Hi, I use bpmn-js in Angular, Jest used by angular for testing code, and when testing the code, an error occurs with cps test the instantiation … I am trying to run a jest test(which renders a bpmn diagram) and I am using angular 11. Though i am getting TypeError : this. After update ng2-charts 3.0.11 to 3.1.0, i have an error in my test Test suite failed to run and error is on import of NgChartsModule … Minimal reproduction of the bug/regression with instructions: I am not sure than this issue is related to ngrx, angular or jest package.