"ReferenceError: waitForElement is not defined" when testing react.js

Question

我正在使用 Jest 和 react-testing-library 测试调用异步函数的组件。当我运行测试时，我得到错误 ReferenceError: waitForElement is not defined

以下 this instructions 我已经尝试过：

没有 .babelrc 中的 useBuiltins 选项，包括 app.test.jsx 文件顶部的 @babel/polyfill，并且没有 @babel/polyfill 在 webpack.config.js 中的条目数组中。我从测试运行中得到错误 ReferenceError: waitForElement is not defined 但应用程序编译成功
with useBuiltIns: 'entry', including @babel/polyfill at the top of the app.test.jsx file, and without @babel/polyfill in the entry array in [=20] =]。我得到 Cannot find module 'core-js/modules/es6.array.every' from 'app.test.jsx' 并且应用程序无法编译。
with useBuiltIns: 'entry'，不包括 app.test.jsx 文件顶部的 @babel/polyfill，并且在 [=] 的条目数组中包含 @babel/polyfill 20=]。我从测试运行中得到错误 ReferenceError: waitForElement is not defined 并且应用程序无法编译。

这是案例 1 中的代码：

进口 app.test.jsx

import '@babel/polyfill';
import React from 'react';
import { render, fireEvent, cleanup } from 'react-testing-library';
import AppContainer from '../components/AppContainer';

测试 app.test.jsx

test('State change', async () => {
  const { debug, getByLabelText, getByTestId, getByText } = render(<AppContainer />);

  fireEvent.change(getByLabelText('testfield'), { target: { value: 'Hello' } });
  fireEvent.click(getByTestId('button'));

  await waitForElement(() => getByText('return value'));
  debug();
});

webpack.config.js

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
    }),
  ],
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

我希望 waitForElement 函数等待 "return value" 文本出现在第二个文本字段中，然后 debug() 函数打印页面 html 代码。相反，我得到了上述错误。

Answer 1

好的，我解决了问题。我缺少 dom-testing-library 依赖项。

这是可行的解决方案。

安装dom-测试库：npm install --save-dev dom-testing-library.
在app.test.jsx导入waithForElement和@babel/polyfill：

import '@babel/polyfill';
import { waitForElement } from 'dom-testing-library';

其余代码与上述案例 1 相同。

Answer 2

您必须从 react-testing-library 导入 waitForElement:

import { render, waitForElement } from 'react-testing-library'

不需要安装 dom-testing-library 因为 RTL 已经依赖于它。

"ReferenceError: waitForElement is not defined" when testing react.js

"ReferenceError: waitForElement is not defined" when testing react.js

reactjs

jestjs

babeljs

react-testing-library