单元测试失败并出现错误 "Cypress command timeout of '4000ms' exceeded."

Question

我正在使用 cypress 和 react-testing 库来对我的组件执行单元测试。但是，当测试执行

时，我运行出现了以下错误

"Cypress command timeout of '4000ms' exceeded."

我注意到我编写的实际测试成功了。但是在以某种方式插入的 "after all" 挂钩中存在错误。我的测试规范中没有 "after all" 挂钩。我想知道可以从哪里调用它，因为我的代码中没有它。

附加信息：我正在使用 plugins/index.js 文件中添加的 webpack 和 istanbul 插件

测试-spec.js

import React from 'react';
import {render, fireEvent, cleanup} from '@testing-library/react';
import Greeting from '../../src/utils/testUtils/components/Greeting';

describe('react-testing-library', () => {   

    it('renders View Details component', () => {      
            const component = render(<Greeting />);
            component.getByText('Hello');
        })
})

我的组件 - greeting.js

import React from 'react';

export default function Greeting() {
    return (
        <div>{'Hello'}</div>
    );
}

cypress\support\index.js

import './commands';
import '@cypress/code-coverage/support';

cypress\plugins\index.js


const webpack = require('@cypress/webpack-preprocessor')
const webpackOptions = {
  module: {
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react'],
          plugins: ['@babel/plugin-proposal-class-properties', 'istanbul'],
        },
      }
    ]
  }
}

const options = {
  // send in the options from your webpack.config.js, so it works the same
  // as your app's code
  webpackOptions,
  watchOptions: {}
}

module.exports = on => {
  on('file:preprocessor', webpack(options))
  on('task', require('@cypress/code-coverage/task'))

}

下面是我在控制台上得到的错误

react-testing-library
    √ renders View Details component (68ms)
    1) "after each" hook for "renders View Details component"


  1 passing (7s)
  1 failing

  1) react-testing-library "after each" hook for "renders View Details component":
     Error: Cypress command timeout of '4000ms' exceeded.

Because this error occurred during a 'after each' hook we are skipping all of the remaining tests.
      at http://localhost:4444/__cypress/runner/cypress_runner.js:82978:25

因此测试失败。关于为什么会发生此错误的任何建议都会有很大帮助。

提前致谢！

Answer 1

在 cypress 社区的一些帮助下，react-testing-library 似乎在每个挂钩之后添加了清理。

https://github.com/testing-library/react-testing-library/blob/master/src/index.js

这是一个导致 cypress 发出警告的异步方法：

cypress_runner.js:85235 Cypress Warning: Cypress detected that you returned a promise in a test, but also invoked one or more cy commands inside of that promise.

我能够阻止添加 afterEach 并使测试正常运行。我们可以使用给定的任何一种方法 here 来实现这一点。

单元测试失败并出现错误 "Cypress command timeout of '4000ms' exceeded."

Unit tests fail with error "Cypress command timeout of '4000ms' exceeded."

javascript

unit-testing

reactjs

cypress

react-testing-library