How can we mock bpmn-js in jest for unit testing?

Hi guys, i am trying to run a jest test and i am using angular 11. Though i am getting TypeError: this.getDefaultLayer(...).getBBox is not a function error. so probably i think we need to mock the bpmn-js.

Hi @nyaupane37, welcome!

I think it will be hard to help you without knowing your context. Can you maybe give some more details on what you want to achieve?

Thanks @Niklas_Kiefer for your quick response. I have a very simple project in Angular and it has a simple feature that it renders a bpmn diagram. It’s working fine and now we want to write a unit test in jest and would like to check that diagram loads and renders successfully. But test is getting failed with this error TypeError: this.getDefaultLayer(...).getBBox is not a function. Please let me know if it is unclear… Thanks

my test repo is here:- GitHub - nyaupane/bpmn-js-jest-test

Thanks for sharing your setup! Can you maybe direct me to the test case that is failing?


1 Like

Seems like the test environment you are using is not running on an actual browser, which is needed by bpmn-js to work. So mocking is definitely an option, if that’s the way to go for your unit test.

Jest is providing a mocking capability for node modules: Manual Mocks · Jest. Therefore it should be possible to mock bpmn-js by overriding the relevant API, in your case at least the constructor and the importXML API.

We have an angular example that uses karma as the testing environment. There you are ensured you are running the tests in a browser.

Thanks @Niklas_Kiefer I followed the same example… It was working fine but we need to make it work using jest.

After spend a day working on tests with jest, React with TS and BpmnJS, I finally found how to mock BpmnJS.

Basically I follow these steps (all in test file):

Import BpmnJS
import BpmnJs from 'bpmn-js/dist/bpmn-navigated-viewer.production.min'

Create a mock object with BpmnJS methods

const mockBpmn = {
  get: jest.fn().mockReturnValue({
    zoom: jest.fn,
    stepZoom: jest.fn,
    add: jest.fn,
  destroy: jest.fn,
  on: jest.fn,
  importXML: jest.fn,

Mock module and BpmnJS object

BpmnJs.mockImplementation(() => mockBpmn)

Now you can use BpmnJs in your React Component (or class under test) normally.