Testing react components in Camunda Modeler Plugin

Hi there,
I’m trying to write unit tests for a react component in a Camunda Modeler plugin using jest. I followed (roughly) the instructions in the jest docs and tried a simple test for my simplest component just to try and get started.

Here’s the component:

import { React } from 'camunda-modeler-plugin-helpers/react';

export function Spinner() {
    return <div data-testid="spinner" className="lds-ring"><div></div><div></div><div></div><div></div></div>
}

Here’s my test:

import { React } from 'camunda-modeler-plugin-helpers/react';
import { cleanup, render } from '@testing-library/react';
import {Spinner } from '../client/Spinner';

afterEach(cleanup);

it('Spinner is rendered', () => {
  const { queryByTestId } = render( <Spinner /> );

  expect(queryByTestId('spinner')).toBeTruthy();
});

when I run the test I get the error message “Not compatible with Camunda Modeler < 3.4” from camunda-modeler-plugin-helpers/react, which steams from this lines of code:

if (!window.react) {
  throw new Error('Not compatible with Camunda Modeler < 3.4');
}

The test runs fine if I add a dependency to react and “import React from ‘react’” in both the test and the tested component, but obviously I don’t want to to that for the component under Test.

I’m neither an expert in react nor in Electron and this is my first modeler plugin. So far I have 1. fooled around with testdouble-jest to no avail trying to get the “official” react dependency into the component non-invasively and 2. tried to set window.react to the “official” react version. The problem with the latter approach seems to be that the import in the component under test runs before I get a chance to change window.react in my unit test.

Does anybody have experience/ideas how I can test my react component when it depends on ‘camunda-modeler-plugin-helpers/react’?

Cheers
Claudio

Hi Claudio,

I’d suggest you to follow the way we implemented this in the Templates Plugin.

In the components source code, we simply use import React from 'react'. Then, only at the build step we make Webpack replace references to react with camunda-modeler-plugin-helpers/react. Thus, you don’t need to worry about the missing dependency in your test. Have a look at the configuration: templates-plugin/webpack.config.js at main · barmac/templates-plugin · GitHub

Please try out this solution and I am happy to support you in case of any follow-up questions.

1 Like

Hi Maciej,

thanks a lot for your quick response, that did fix the problem!

for others interested in the matter: While the webpack based solution works perfectly fine there is an alternative that I ended up using, which is to alias not from webpack.config.js, but from jest.config.js using moduleNameMapper.
I find it to be a bit clearer to do it this way since it allows the import in the tested component to be unaliased and the import in the test to be aliased instead of the other way around.
Also it allowed me to alias to a module on the file system which I couldn’t figure out how to do from webpack.config.js.

Cheers
Claudio