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

Developers General
1

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.
Thanks.

2

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?

3

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

4

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

5

Steps:

1 Like
6

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.

7

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

8

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

9

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

jest.mock('bpmn-js/dist/bpmn-navigated-viewer.production.min')
BpmnJs.mockImplementation(() => mockBpmn)

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