«ReferenceError: waitForElement не определен» при тестировании response.js

Question

Я тестирую с помощью Jest и реагирующей на тестирование библиотеки компонент, вызывающий асинхронную функцию. Когда я запускаю тест, я получаю ошибку ReferenceError: waitForElement is not defined

После этой инструкции Я пробовал:

1. без опции useBuiltins в .babelrc, включая @babel/polyfill в верхней части файла app.test.jsx и без @babel/polyfill в массиве записей в webpack.config.js. Я получаю сообщение об ошибке ReferenceError: waitForElement is not defined, но приложение успешно компилируется

2. с 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' и приложение не компилируется.

3. с useBuiltIns: 'entry', НЕ включая @babel/polyfill в верхней части файла app.test.jsx и WITH @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

Вы должны импортировать waitForElement из react-testing-library:

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

Нет необходимости устанавливать dom-testing-library, поскольку RTL уже зависит от него.

Answer 2

Хорошо, я решил проблему.Мне не хватало зависимости dom-testing-library.

Вот рабочее решение.

• Установить библиотеку dom-testing: npm install --save-dev dom-testing-library.

• В app.test.jsx импорт waithForElement и @babel/polyfill:

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

• Остальная часть кода такая же, как в случае 1 выше.