Unable to render LineChart on React Testing Library

[joaopedromatias]

Description Unable to render LineChart inside React Testing Library

Reproduce

// test code: 

it( 'should render the line chart', () => {

  render(<div style={{width: '1000px', height: '1000px'}}><ResponsiveLine
              data={[
                 { 
                    id: 'A',
                    data: [
                        {x: '12-20-2022', y: '201.05'},
                    ]
                },
                {   id: 'B',
                    data: [
                        {x: '12-20-2022', y: '201.05'}
                    ]
                }]
              }   
              margin={{ top: 50, right: 110, bottom: 90, left: 60 }}
              xScale={{ type: 'point' }}
              curve='linear'
              yScale={{
                  type: 'linear',
                  min: 'auto', 
                  max: 'auto', 
                  stacked: false,
                  reverse: false,
                  tickValues: 10
              }}
              yFormat="> $.2f" 
              axisBottom={{
                  orient: 'bottom',
                  tickSize: 5,
                  tickPadding: 2,
                  tickRotation: 60,
                  legend: 'Data de uso',
                  legendOffset: 80,
                  legendPosition: 'end'       
              }}
              axisLeft={{
                  tickValues: 10,
                  orient: 'left',
                  tickSize: 5,
                  tickPadding: 2,
                  tickRotation: 0,
                  legend: 'Custo (USD)',
                  legendOffset: -50,
                  legendPosition: 'end'
              }}
              pointSize={4}
              colors={{ scheme: 'set1' }}
              pointColor={{ theme: 'background' }}
              pointBorderWidth={2}
              pointBorderColor={{ from: 'serieColor' }}
              pointLabelYOffset={-12}
              isInteractive={true}
              enableSlices='x'
              crosshairType='x'
              enableGridX={false}
              legends={[
                  {
                      anchor: 'top-left',
                      direction: 'row',
                      justify: false,
                      translateX: 10,
                      onClick: (e) => { console.log(e)},
                      translateY: -35,
                      itemsSpacing: 0,
                      itemDirection: 'left-to-right',
                      itemWidth: 80,
                      itemHeight: 20,
                      itemOpacity: 0.75,
                      symbolSize: 15,
                      symbolShape: 'circle',
                      symbolBorderColor: 'rgba(0, 0, 0, .5)',
                  }
              ]}
          /></div>)

          screen.debug() // shows the component on terminal

     }

The DOM rendered does not contain the chart:

{
   "dependencies": {
      "jest-environment-jsdom": "^29.3.1",
      "@testing-library/jest-dom": "^5.16.5",
      "@testing-library/react": "^12.1.5",
     "ts-jest": "^29.0.5",
     "@nivo/bar": "^0.80.0",
     "@nivo/core": "^0.80.0",
     "@nivo/line": "^0.80.0",
   }
}

Expected behavior It should be rendered by the React Testing Library on the jsdom environment

Desktop (please complete the following information):

• OS: MacOS

[djbowers]

Having the same issue here. I am rendering the line chart as a story in storybook and everything is working great there, but when I try to render the same story with jest, all I get is an empty div like above.

[KadeerAmin]

Bump. We have our graphs working for our data visualizations but are unable to regression test using react-testing-library.

[beohoang98]

I think the reason is here https://github.com/plouc/nivo/blob/master/packages/core/src/components/ResponsiveWrapper.js

The responsive measure not work with Jest environment so width & height always are 0 then nothing are rendered

So I found a solution that is mocking ResponsiveWrapper component:

jest.mock("@nivo/core", () => ({
  ...jest.requireActual("@nivo/core"),
  ResponsiveWrapper: ({ children }: any) =>
    children({ width: 400, height: 400 }),
}));

Then it worked

[joaopedromatias]

Great @beohoang98! thank you

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!