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