Question

我正在用Jest和react-testing-library测试一个正在调用异步功能的组件。运行测试时，出现错误ReferenceError: waitForElement is not defined

在this instructions之后，我尝试过：

在useBuiltins中没有.babelrc选项，包括@babel/polyfill文件顶部的app.test.jsx，并且条目中没有@babel/polyfill webpack.config.js中的数组。我从测试运行中收到错误ReferenceError: waitForElement is not defined，但是应用程序编译成功
带有useBuiltIns: 'entry'，包括@babel/polyfill在文件app.test.jsx的顶部，并且@babel/polyfill的条目数组中没有webpack.config.js。我得到Cannot find module 'core-js/modules/es6.array.every' from 'app.test.jsx'，应用程序无法编译。
带有useBuiltIns: 'entry'，在@babel/polyfill文件顶部不包括app.test.jsx，并且@babel/polyfill的条目数组中带有webpack.config.js。我从测试运行中收到错误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函数正在等待“返回值”文本出现在第二个文本字段中，然后等待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

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

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

由于RTL已经依赖dom-testing-library，因此无需安装my_lists = list(chunks(list(range(0, 100)), 10))。

测试react.js时出现“ ReferenceError：waitForElement未定义”

2 个答案: