TypeError: r.node.getBBox is not a function

[overlineink]

Hey @junedchhipa, I hope you're doing well. Since our team implemented the apex-chart all our unit tests (for components that uses apex) get failed.

Uncaught (in promise): TypeError: r.node.getBBox is not a function
    TypeError: r.node.getBBox is not a function

      at new create (../../node_modules/apexcharts/dist/apexcharts.common.js:6:363832)
      at create.bbox (../../node_modules/apexcharts/dist/apexcharts.common.js:6:364039)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:6:25530)
      at ../../node_modules/apexcharts/dist/apexcharts.common.js:6:168277
          at Array.map (<anonymous>)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:6:167680)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:6:172523)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:6:171960)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:14:38662)
      at t.create (../../node_modules/apexcharts/dist/apexcharts.common.js:6:3406)
      at ../../node_modules/apexcharts/dist/apexcharts.common.js:14:37322
      at new ZoneAwarePromise (../../node_modules/zone.js/dist/zone.js:931:29)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:14:36815)
      at ChartComponent.Object.<anonymous>.ChartComponent.render (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:172:26)
      at ChartComponent.Object.<anonymous>.ChartComponent.createElement (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:168:10)
      at AsapAction.work (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:85:12)
      at AsapAction.Object.<anonymous>.AsyncAction._execute (../../node_modules/rxjs/src/internal/scheduler/AsyncAction.ts:122:12)
      at AsapAction.Object.<anonymous>.AsyncAction.execute (../../node_modules/rxjs/src/internal/scheduler/AsyncAction.ts:97:24)
      at AsapScheduler.Object.<anonymous>.AsapScheduler.flush (../../node_modules/rxjs/src/internal/scheduler/AsapScheduler.ts:17:26)
      at runIfPresent (../../node_modules/rxjs/src/internal/util/Immediate.ts:8:5)
      at ../../node_modules/rxjs/src/internal/util/Immediate.ts:16:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:390:52)
      at Object.onInvoke (../../../packages/core/src/zone/ng_zone.ts:273:25)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/dist/zone.js:150:43)
      at ../../node_modules/zone.js/dist/zone.js:910:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:423:31)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../../node_modules/zone.js/dist/proxy.js:160:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:422:60)
      at Object.onInvokeTask (../../../packages/core/src/zone/ng_zone.ts:262:25)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:422:60)
      at Zone.Object.<anonymous>.Zone.runTask (../../node_modules/zone.js/dist/zone.js:195:47)
      at drainMicroTaskQueue (../../node_modules/zone.js/dist/zone.js:601:35)
      at resolvePromise (../../node_modules/zone.js/dist/zone.js:852:31)
      at new ZoneAwarePromise (../../node_modules/zone.js/dist/zone.js:934:17)
      at t.value (../../node_modules/apexcharts/dist/apexcharts.common.js:14:36815)
      at ChartComponent.Object.<anonymous>.ChartComponent.render (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:172:26)
      at ChartComponent.Object.<anonymous>.ChartComponent.createElement (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:168:10)
      at AsapAction.work (../../node_modules/ng-apexcharts/bundles/ng:/ng-apexcharts/lib/chart/chart.component.ts:85:12)
      at AsapAction.Object.<anonymous>.AsyncAction._execute (../../node_modules/rxjs/src/internal/scheduler/AsyncAction.ts:122:12)
      at AsapAction.Object.<anonymous>.AsyncAction.execute (../../node_modules/rxjs/src/internal/scheduler/AsyncAction.ts:97:24)
      at AsapScheduler.Object.<anonymous>.AsapScheduler.flush (../../node_modules/rxjs/src/internal/scheduler/AsapScheduler.ts:17:26)
      at runIfPresent (../../node_modules/rxjs/src/internal/util/Immediate.ts:8:5)
      at ../../node_modules/rxjs/src/internal/util/Immediate.ts:16:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:391:26)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (../../node_modules/zone.js/dist/proxy.js:129:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:390:52)
      at Object.onInvoke (../../../packages/core/src/zone/ng_zone.ts:273:25)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (../../node_modules/zone.js/dist/zone.js:390:52)
      at Zone.Object.<anonymous>.Zone.run (../../node_modules/zone.js/dist/zone.js:150:43)
      at ../../node_modules/zone.js/dist/zone.js:910:34
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:423:31)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (../../node_modules/zone.js/dist/proxy.js:160:39)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:422:60)
      at Object.onInvokeTask (../../../packages/core/src/zone/ng_zone.ts:262:25)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (../../node_modules/zone.js/dist/zone.js:422:60)
      at Zone.Object.<anonymous>.Zone.runTask (../../node_modules/zone.js/dist/zone.js:195:47)
      at drainMicroTaskQueue (../../node_modules/zone.js/dist/zone.js:601:35)

[rubenmoya]

It's happening to us too, using @testing-library/react breaks the test, same stack trace

[overlineink]

@rubenmoya Maybe we can fix this error and then open a PR.

[KBPsystem777]

Reviving this. Same issue is happening on my end.

[wellingtonsilverio]

This error continues, and I find no solution to mask it

[sandeepyekkali]

Facing same issue. Any solution or workaround? Thanks.

[Harkishen-Singh]

Same here as well.

[Amitkumarc]

hey @junedchhipa , did you get time lo look into this?

Getting same error while testing react-app with jest and enzyme

1. While mounting the component:

   TypeError: r.node.getBBox is not a function

   at node_modules/apexcharts/dist/apexcharts.common.js:14:37819 at t.value (node_modules/apexcharts/dist/apexcharts.common.js:14:37312) at r.value (node_modules/react-apexcharts/dist/react-apexcharts.min.js:1:2760)

2. While calling ApexCharts.exec funtion:

   TypeError: Cannot set property 'fillStyle' of null

   at node_modules/apexcharts/dist/apexcharts.common.js:6:142365 at t.value (node_modules/apexcharts/dist/apexcharts.common.js:6:142083) at t.value (node_modules/apexcharts/dist/apexcharts.common.js:14:47346) at Function.exec (node_modules/apexcharts/dist/apexcharts.common.js:14:48349)

[ijayoa]

Hey there, @junedchhipa. facing the same issue here + one more. testing with React testing library and Jest

TypeError: this.node.getScreenCTM is not a function
TypeError: r.node.getBBox is not a function

[guhcostan-equals]

Same here.

[ijayoa]

@guhcostan-equals I used this to mock apexcharts. maybe it might be helpful

import ApexCharts from "apexcharts";
import ReactApexChart from "react-apexcharts";`

jest.mock("react-apexcharts", () =>
  jest.fn(() => {
    return null;
  })
);
jest.mock("apexcharts", () => ({
  exec: jest.fn(() => {
    return new Promise((resolve, reject) => {
      resolve("uri");
    });
  })
}));

[rodpatulski]

Hey there, @junedchhipa. facing the same issue here + one more. testing with React testing library and Jest

TypeError: this.node.getScreenCTM is not a function
TypeError: r.node.getBBox is not a function

I also get getScreenCTM in jest