I'm writing unit tests for our react application. There are few ponents which have been created using recharts library.

import { COLORS } from 'constants/colors.constants';
import { FC } from 'react';

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { MonthlyApplication } from 'store/stats/types/stats-state.types';

const BarChartComponent: FC<BarChartComponentProps> = ({
  data,
  barSize,
  height,
  color,
  allowDecimals,
}) => (
  <ResponsiveContainer width='100%' height={height}>
    <BarChart data={data}>
      <CartesianGrid strokeDasharray='10 10 ' />
      <XAxis dataKey='month' />
      <YAxis allowDecimals={allowDecimals} />
      <Tooltip />
      <Bar dataKey='count' fill={color} barSize={barSize} />
    </BarChart>
  </ResponsiveContainer>
);

type BarChartComponentProps = {
  data: MonthlyApplication[];
  color?: string;
  height?: number;
  barSize?: number;
  allowDecimals?: boolean;
};

BarChartComponent.defaultProps = {
  color: COLORS.DARK_BLUE,
  height: 300,
  barSize: 75,
  allowDecimals: false,
};

export default BarChart;

Tried writing unit tests for this but it failed. Tried almost all the posts on stackoverflow and github, still this doesn't work. How should I properly write this?

This is what I wrote so far.

import { render, screen } from '@testing-library/react';
import { MonthlyApplication } from 'store/stats/types/stats-state.types';
import BarChart from '../bar-chart/bar-chartponent';

const chartData: MonthlyApplication[] = [
  { month: 'Jan 2022', count: 10 },
  { month: 'Feb 2022', count: 20 },
];

test('Renders BarChart with the following', () => {
  render(<BarChart data={chartData} />);

  // expect(screen.getByText(/Jan 2022/)).toBeInTheDocument();
});

I'm writing unit tests for our react application. There are few ponents which have been created using recharts library.

import { COLORS } from 'constants/colors.constants';
import { FC } from 'react';

import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { MonthlyApplication } from 'store/stats/types/stats-state.types';

const BarChartComponent: FC<BarChartComponentProps> = ({
  data,
  barSize,
  height,
  color,
  allowDecimals,
}) => (
  <ResponsiveContainer width='100%' height={height}>
    <BarChart data={data}>
      <CartesianGrid strokeDasharray='10 10 ' />
      <XAxis dataKey='month' />
      <YAxis allowDecimals={allowDecimals} />
      <Tooltip />
      <Bar dataKey='count' fill={color} barSize={barSize} />
    </BarChart>
  </ResponsiveContainer>
);

type BarChartComponentProps = {
  data: MonthlyApplication[];
  color?: string;
  height?: number;
  barSize?: number;
  allowDecimals?: boolean;
};

BarChartComponent.defaultProps = {
  color: COLORS.DARK_BLUE,
  height: 300,
  barSize: 75,
  allowDecimals: false,
};

export default BarChart;

Tried writing unit tests for this but it failed. Tried almost all the posts on stackoverflow and github, still this doesn't work. How should I properly write this?

This is what I wrote so far.

import { render, screen } from '@testing-library/react';
import { MonthlyApplication } from 'store/stats/types/stats-state.types';
import BarChart from '../bar-chart/bar-chart.ponent';

const chartData: MonthlyApplication[] = [
  { month: 'Jan 2022', count: 10 },
  { month: 'Feb 2022', count: 20 },
];

test('Renders BarChart with the following', () => {
  render(<BarChart data={chartData} />);

  // expect(screen.getByText(/Jan 2022/)).toBeInTheDocument();
});

• javascript
• reactjs
• react-native
• react-testing-library
• react-native-testing-library

Share Improve this question Follow asked Jul 26, 2022 at 4:14 Shashika VirajhShashika Virajh 9,4672020 gold badges6565 silver badges112112 bronze badges 1

• I am having issues with this as well. It seems that the ResponsiveContainer is messing with the html on the page and the tests can't render anything else beyond the recharts_measurement_span – BooBailey Commented Sep 16, 2022 at 3:43

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Two things you can try:

1. mock the responsiveContainer with at least one fixed width/height value like so;

jest.mock("recharts", () => {
  const OriginalModule = jest.requireActual("recharts");
  return {
    ...OriginalModule,
    ResponsiveContainer: ({ children }) => (
      <OriginalModule.ResponsiveContainer width={800} height={800}>
        {children}
      </OriginalModule.ResponsiveContainer>
    ),
  };
});

2. If you keep getting observer is not constructor error or any other error then you have to install

resize-observer-polyfill

then add at the top of your test file, just after importing modules

global.ResizeObserver = require("resize-observer-polyfill");

note: you dont need to bine the first solution with this

The second solution worked for me though