Babel.js “引用错误:测试react.js时未定义”waitForElement

5n0oy7gb  于 2022-12-08  发布在  Babel
关注(0)|答案(3)|浏览(165)

我正在用Jest和react-testing-library测试一个调用异步函数的组件。
以下this instructions我已尝试:
1.在.babelrc中没有useBuiltins选项,在app.test.jsx文件的顶部包括@babel/polyfill,并且在webpack.config.js的条目数组中没有@babel/polyfill。我从测试运行中得到错误ReferenceError: waitForElement is not defined,但应用程序编译成功
1.在app.test.jsx文件的顶部有useBuiltIns: 'entry',包括@babel/polyfill,在webpack.config.js的条目数组中没有@babel/polyfill。我得到Cannot find module 'core-js/modules/es6.array.every' from 'app.test.jsx',应用程序无法编译。
1.使用useBuiltIns: 'entry',不包括app.test.jsx文件顶部的@babel/polyfill,以及webpack.config.js中条目数组中的WITH @babel/polyfill。我从测试运行中得到错误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();
});

网页包.配置.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代码,但我得到了上面提到的错误。

uoifb46i

uoifb46i1#

必须从react-testing-library导入waitForElement

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

没有必要安装dom-testing-library,因为RTL已经依赖于它。

gopyfrb3

gopyfrb32#

好的,我解决了这个问题。我缺少dom-testing-library依赖项。
下面是工作解决方案。

  • 安装dom-testing库:npm install --save-dev dom-testing-library .
  • app.test.jsx中导入waitForElement@babel/polyfill
import '@babel/polyfill';
import { waitForElement } from 'dom-testing-library';
  • 代码的其余部分与上面的案例1相同。
8iwquhpp

8iwquhpp3#

我可以通过以下方法解决此问题

import { waitForElement } from "@testing-library/dom";

相关问题