TypeError: Cannot read properties of undefined (reading 'prototype') when Jest testing angular component that includes rappid.js

Question

Facing the same error with rappid. I tried the suggested solution but still facing the same error.

  ● Test suite failed to run

TypeError: Cannot read properties of undefined (reading 'prototype')

  12 |  or from the Rappid archive as was distributed by client IO. See the LICENSE file.*/
  13 | /* eslint-disable */
> 14 | import { dia, shapes, ui } from '@clientio/rappid';
     | ^
  15 |
  16 | import { enableVirtualRendering } from './features/virtual-rendering';
  17 | import { toolbarConfig } from './config/toolbar.config';

  at ../../node_modules/@clientio/rappid/rappid.js:4070:32
  at ../../node_modules/@clientio/rappid/rappid.js:4613:3
  at ../../node_modules/@clientio/rappid/rappid.js:2:65

Error in rappid.js

Could someone help me out here. what I'm missing in order to rectify that.

Answer 1

Jest uses jsdom which doesn't support some SVG implementations. https://github.com/jsdom/jsdom/issues/918

It is possible to mock missing methods in Jest.

The following repository contains mocks for Jest with JointJS. It is a React project, but a similar test setup in Angular should fix the issue too I think. https://github.com/clientIO/rappid-tutorial-react/blob/main/src/setupTests.ts