Bpmn js not getting mocked

Developers
1

Hello Team ,
I am not able to mock the creation of BpmnModeler . Failing in writing a simple test case .

Environment - Jest ( v28 ) , webpack ( v4.46 ) ,React ( v16 )

Component Code

import BpmnModeler from 'bpmn-js/lib/Modeler';
class BpmnView extends React.Component {
componentDidMount() {
const modeler = new BpmnModeler({
        container: '#js-canvas',
        keyboard: {
          bindTo: window
        }
      });
}

render(){
return ( <div id="js-canvas" />)
} }

Unit Test Code

import 'jest-styled-components';
import BpmnView from '../../../../src/js/components/diagramViewer';
import {render,screen} from '@testing-library/react'

jest.mock("bpmn-js/lib/Modeler", () => ({
  BpmnModeler: {
    get: jest.fn().mockReturnValue({
      zoom: jest.fn,
      stepZoom: jest.fn,
      add: jest.fn,
    }),
    destroy: jest.fn,
    on: jest.fn,
    importXML: jest.fn,
  },
}));

test('Hello World Test', () => {
    let component;
    component = render(
      <BpmnView />
    );
    expect(true).toBe(true);
  });

I get the following error -

 _Modeler.default is not a constructor
      80 |
      81 |   componentDidMount() {
    > 82 |     const modeler = new BpmnModeler(

requesting the team to please help as i am stuck here since a long time

2

I could not find the solution in thread to be useful

3

cc: @Niklas_Kiefer @nikku

4

You have to mock default (cf. error) as this is what the BpmnModeler is pulled from.

5

Can you please explain in detail what default( cf.error ) are you referring to .

6

You have to mock the default export, as BpmnModeler is exported as default. The error indicates that it attemts to import default from Modeler, which does not exist.

You include it like this:

import BpmnModeler from '...';

That is equivalent to:

import { default as BpmnModeler } from '...';

Try fixing your mock to properly expose the modeler as a default export:

jest.mock("bpmn-js/lib/Modeler", () => ({
  default: {
    get: jest.fn().mockReturnValue({
      zoom: jest.fn,
      stepZoom: jest.fn,
      add: jest.fn,
    }),
    destroy: jest.fn,
    on: jest.fn,
    importXML: jest.fn,
  },
}));
7

Hi @nikku

somehow below mock code fixed the error for me

jest.mock('bpmn-js/lib/Modeler', () => {

  return jest.fn().mockImplementation(() => (
    {
    get: jest.fn().mockReturnValue({
      zoom: jest.fn,
      stepZoom: jest.fn,
      add: jest.fn,
      show: jest.fn,
      close: jest.fn
    }),
    destroy: jest.fn,
    on: jest.fn,
    importXML: jest.fn().mockResolvedValue({}),
  }
  ));
})
1 Like