Reactjs &引用；ReferenceError:waitForElement未定义"；测试react.js时

我正在用Jest和react测试库测试一个调用异步函数的组件。当我运行测试时，我得到一个错误

ReferenceError:waitForElement未定义

以下是我尝试过的：

没有

.babelrc

中的

useBuiltins

选项，包括

app.test.jsx

文件顶部的

@babel/polyfill

以及

webpack.config.js

中的条目数组中的

@babel/polyfill

。我从测试运行中得到错误

ReferenceError:waitForElement未定义，但应用程序编译成功

使用

useBuiltIns:'entry'

，包括

@babel/polyfill

位于

app.test.jsx

文件顶部，在

webpack.config.js

中的条目数组中不使用

@babel/polyfill

。我得到

找不到模块'core js/modules/es6.array.every'from'app.test.jsx'

，应用程序无法编译

使用

useBuiltIns:'entry'

，在

app.test.jsx

文件的顶部不包括

@babel/polyfill

，在

webpack.config.js

的条目数组中使用

@babel/polyfill

。我从测试运行中得到错误

ReferenceError:waitForElement未定义，并且应用程序无法编译

下面是案例1中的代码：

在app.test.jsx中导入

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

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

在app.test.jsx中测试

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

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

.babelrc

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

---

我希望

waitForElement

函数等待“返回值”文本出现在第二个文本字段中，然后

debug（）

函数打印页面html代码。相反，我得到了上面提到的错误。

好的，我解决了这个问题。我缺少

dom测试库

依赖项

这是可行的解决方案

• 安装dom测试库：

  npm安装--保存开发人员dom测试库

• 在

  app.test.jsx

  import

  waithForElement

  和

  @babel/polyfill

  ：

• 代码的其余部分与上面的案例1相同

---

您必须从

react测试库导入
waitForElement
：

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

不需要安装
dom测试库
，因为RTL已经依赖它了