ReferenceError：运行测试时未定义 regeneratorRuntime答案

【问题标题】：ReferenceError: regeneratorRuntime is not defined when running testingReferenceError：运行测试时未定义 regeneratorRuntime
【发布时间】：2022-02-09 20:27:02
【问题描述】：

我正在尝试弄清楚如何向我的 React 应用程序添加测试。我正在使用反应测试库。我在尝试运行测试时收到此错误ReferenceError: regeneratorRuntime is not defined。

这是测试文件的样子：

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();
    });
});

部分相关堆栈跟踪的完全错误：

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)

然后这是第 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);

我已经用谷歌搜索了这个错误并在此处进行了查找，但我发现没有任何帮助。有人能弄清楚为什么我的测试会因该错误而失败吗？

【问题讨论】：

标签： reactjs webpack async-await react-testing-library regenerator-runtime

【解决方案1】：

看起来您正在使用 webpack，因为在 Create React App 中已经设置了再生器运行时。首先安装模块：

npm i regenerator-runtime

并在webpack.config.js 中将此设置添加到条目中：

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

这将使regeneratorRuntime 在全球范围内可用。

【讨论】：