单元测试失败，并出现错误“超出赛普拉斯命令超时‘4000ms’”。

Question

我正在使用 cypress 和反应测试库来对我的组件执行单元测试。但是，当测试执行时我遇到以下错误

\n\n

“超出赛普拉斯命令超时‘4000ms’。”

\n\n

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

\n\n

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

\n\n

测试规范.js

\n\n

import React from \'react\';\nimport {render, fireEvent, cleanup} from \'@testing-library/react\';\nimport Greeting from \'../../src/utils/testUtils/components/Greeting\';\n\ndescribe(\'react-testing-library\', () => {   \n\n    it(\'renders View Details component\', () => {      \n            const component = render(<Greeting />);\n            component.getByText(\'Hello\');\n        })\n})\n

\n\n

我的组件 -greeting.js

\n\n

import React from \'react\';\n\nexport default function Greeting() {\n    return (\n        <div>{\'Hello\'}</div>\n    );\n}\n

\n\n

赛普拉斯\\support\\index.js

\n\n

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

\n\n

cypress\\plugins\\index.js

\n\n

\nconst webpack = require(\'@cypress/webpack-preprocessor\')\nconst webpackOptions = {\n  module: {\n    rules: [\n      {\n        test: /\\.(js|jsx|mjs)$/,\n        loader: \'babel-loader\',\n        options: {\n          presets: [\'@babel/preset-env\', \'@babel/preset-react\'],\n          plugins: [\'@babel/plugin-proposal-class-properties\', \'istanbul\'],\n        },\n      }\n    ]\n  }\n}\n\nconst options = {\n  // send in the options from your webpack.config.js, so it works the same\n  // as your app\'s code\n  webpackOptions,\n  watchOptions: {}\n}\n\nmodule.exports = on => {\n  on(\'file:preprocessor\', webpack(options))\n  on(\'task\', require(\'@cypress/code-coverage/task\'))\n\n}\n

\n\n

以下是我在控制台上收到的错误

\n\n

react-testing-library\n    \xe2\x88\x9a renders View Details component (68ms)\n    1) "after each" hook for "renders View Details component"\n\n\n  1 passing (7s)\n  1 failing\n\n  1) react-testing-library "after each" hook for "renders View Details component":\n     Error: Cypress command timeout of \'4000ms\' exceeded.\n\nBecause this error occurred during a \'after each\' hook we are skipping all of the remaining tests.\n      at http://localhost:4444/__cypress/runner/cypress_runner.js:82978:25\n

\n\n

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

\n\n

提前致谢！

\n

Answer 1

在 cypress 社区的一些帮助下，反应测试库似乎在每个钩子之后添加了清理功能。

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 并使测试正常工作。我们可以使用此处给出的任何一种方法来实现这一目标。