Question

我正在使用cypress和react-testing库，以便在我的组件上执行单元测试。但是，执行测试时

，我遇到了以下错误

“超过Cypress命令超时'4000ms'。”

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

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

test-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在每个钩子之后都添加了after进行清理。

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

这是一种异步方法，会导致柏树发出警告：

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命令超时'4000ms'”。

1 个答案: