Billboard.js: "TypeError: (0 , _billboard.areaStep) is not a function" when testing with Jest

[programmiana]

Description

Hello dear billboarders.js 👋🏽

I am having trouble testing a step chart using jest and storybook. I get an error when doing a simple test for render. The error looks like so:

Error: Uncaught [TypeError: (0 , _billboard.areaStep) is not a function]

Steps to check or reproduce

My package.json contains:
"jest": "^26.5.2",
"@storybook/react": "^6.1.9",
"webpack": "^4.44.2",

command would be: run jest

thanks 🌈

[michkami]

Hi @programmiana,
please provide some reproducible online code for check up.

[programmiana]

Hey, thanks for the reply!
Here you go:

https://github.com/donaldpipowitch/billboard-jest-import-error

[IMHOJEONG]

A simple solution is to change areaStep to area-step of string

I think it's a part I need to think a little more about

    types: {
          allocatedAmount: "area-step",
          freeAmount: "area-step",
        }

This part of the code referenced
https://github.com/naver/billboard.js/blob/master/types/bb.d.ts

[michkami]

A simple solution is to change areaStep to area-step of string

I think it's a part I need to think a little more about

    types: {
          allocatedAmount: "area-step",
          freeAmount: "area-step",
        }

This part of the code referenced
https://github.com/naver/billboard.js/blob/master/types/bb.d.ts

This would be an option, if you don't care about the bundles size and importing unused types.

I had similiar problem witrh angular 6 and angular 7 extending billboard 2.x.x.
I was not able to extend the prototype of ChartInternal with all the functions which are extended by the side effect in my prod build with build optimizer enabled ("ng build --prod --build-optimizer=true"). I was always getting error, that bb.someChartInternalFunction is not a function.
The problem in my case was the Angular Build Optimizer, which simply can't extend any side effects. Similiar issue was with d3-color, as they were extending some methods as side effect.
My solution was to update to Anular 8.2.x (it is the version where they also updated the @angular-devkit/build-optimizer). Since the update I was able to use the ChartInternal functions in productive build.

I never worked with jest or storybook, but perhaps it is a similar problem.

[programmiana]

Hello both,

Thank you for the replies. Sadly the area-step as string solution is not really an option as the bundle size would be too big for our App.
In case there you have any further thoughts/ideas that could help us investigate this further, do let us know ✨