我正在用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代码,但我得到了上面提到的错误。
3条答案
按热度按时间uoifb46i1#
必须从
react-testing-library
导入waitForElement
:没有必要安装
dom-testing-library
,因为RTL已经依赖于它。gopyfrb32#
好的,我解决了这个问题。我缺少
dom-testing-library
依赖项。下面是工作解决方案。
npm install --save-dev dom-testing-library
.app.test.jsx
中导入waitForElement
和@babel/polyfill
:8iwquhpp3#
我可以通过以下方法解决此问题