ReferenceError: regeneratorRuntime is not defined when running testing

Question

I am trying to figure out how to add testing to my React application. I am using React Testing Library. I am getting this error ReferenceError: regeneratorRuntime is not defined when I try and run the test.

This is what the test file looks like:

import {
    render,
    screen,
    within,
    fireEvent,
    waitFor
} from '@testing-library/react';
import Providers from '../../context/GlobalContextProviders';
import { BrowserRouter as Router } from 'react-router-dom';
import IngredientsCenter from '../views/IngredientsCenter';

function renderWithProviders(el) {
    render(
        <Providers>
            <Router>{el}</Router>
        </Providers>
    );
}

test('The ingredients table exists on the screen', async () => {
    renderWithProviders(<IngredientsCenter />);
    const ingredientsTable = screen.getByRole('ingredients-table');
    await waitFor(() => {
        expect(ingredientsTable).toBeTruthy();
    });
});

Full error with partial relevant stack trace:

regeneratorRuntime is not defined
ReferenceError: regeneratorRuntime is not defined
    at C:\...\node_modules\react-table\src\publicUtils.js:169:10
    at useAsyncDebounce (C:\...\node_modules\react-table\src\publicUtils.js:169:10)
    at GlobalFilter (C:\...\src\components\pieces\IngredientsTable.js:27:19)

And then this is the IngredientsTable file up to just past line 27:

import React, { useState } from 'react';
import {
    useTable,
    useSortBy,
    useGlobalFilter,
    useAsyncDebounce
} from 'react-table';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
    faSortUp,
    faSortDown
} from '@fortawesome/pro-duotone-svg-icons';
import {
    faCheck,
    faEllipsisV
} from '@fortawesome/pro-regular-svg-icons';
import { Scrollbars } from 'rc-scrollbars';

// Define a default UI for filtering
const GlobalFilter = ({
    preGlobalFilteredRows,
    globalFilter,
    setGlobalFilter
}) => {
    const count = preGlobalFilteredRows.length;
    const [value, setValue] = useState(globalFilter);
    const onChange = useAsyncDebounce((value) => {
        setGlobalFilter(value || undefined);
    }, 200);

I have googled this error and looked it up on here and nothing I have found has helped me. Can someone figure out why my test would be failing with that error?

Answer 1

Looks like you are using webpack because regenerator runtime is already set in Create React App. First install the module:

npm i regenerator-runtime

and in webpack.config.js add this setting to entry:

 entry: ["regenerator-runtime/runtime", "./src/index.js"],

this will make regeneratorRuntime available globally.

Answer 2

in my case i created react app with vite

npm i regenerator-runtime

and in main.jsx add the following line

import 'regenerator-runtime'

Answer 3

In my case i created react app with vite

npm i regenerator-runtime

And in main.jsx add the following line

import 'regenerator-runtime'

In my react-table.test.ts file imported line on top of test.ts file