jest mocking charts with data problem

[Khoi-Dinh]

Im getting this error when I run my jest unit tests that uses these carbon charts:

import {
    SimpleBarChart,
    StackedBarChart,
    DonutChart,
    PieChart,
    GroupedBarChart,
    LineChart,
} from '@carbon/charts-react';

I mocked the actual charts from the repository

Mocks:

jest.mock('@carbon/charts-react', () => {
    const FakeSimpleBarChart = jest.fn(() => <></>);
    const FakeStackedBarChart = jest.fn(() => <></>);
    const FakeDonutChart = jest.fn(() => <></>);
    const FakePieChart = jest.fn(() => <></>);
    const FakeGroupedBarChart = jest.fn(() => <></>);
    const FakeLineChart = jest.fn(() => <></>);

    return {
        SimpleBarChart: FakeSimpleBarChart,
        StackedBarChart: FakeStackedBarChart,
        DonutChart: FakeDonutChart,
        PieChart: FakePieChart,
        GroupedBarChart: FakeGroupedBarChart,
        LineChart: FakeLineChart,
    };
});

So now in screen.logTestingPlaygroundURL(), I get the page but no charts render. I have modified the mocks to this:

jest.mock('@carbon/charts-react', () => {
    const OriginalModule = jest.requireActual('@carbon/charts-react')
    const FakeSimpleBarChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    const FakeStackedBarChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    const FakeDonutChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    const FakePieChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    const FakeGroupedBarChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    const FakeLineChart = {
        ...OriginalModule,
        ResponsiveContainer: ({ children }) => (
            <OriginalModule.ResponsiveContainer width={800} height={800}>
                {children}
            </OriginalModule.ResponsiveContainer>
        ),
    }

    return {
                SimpleBarChart: FakeSimpleBarChart,
                StackedBarChart: FakeStackedBarChart,
                DonutChart: FakeDonutChart,
                PieChart: FakePieChart,
                GroupedBarChart: FakeGroupedBarChart,
                LineChart: FakeLineChart,
            };
})

but I get the error:

babel-plugin-jest-hoist: The module factory of jest.mock() is not allowed to reference any out-of-scope variables.
Invalid variable access: _jsxFileName

Is there a way to fix this?