Cypress React，找不到安装组件的根元素答案

【问题标题】：Cypress React, cannot find root element to mount the componentCypress React，找不到安装组件的根元素
【发布时间】：2021-05-21 12:03:29
【问题描述】：

我正在尝试测试我的 react 应用程序，使用 (create-react-app) 和 cypress 创建。

由于某种原因，我收到此错误：

如你所见，它试图通过 ROOT_ID 获取元素，ROOT_ID 它是一个常量：

我找到的所有解决这个问题的方法都是在 cypress/support/index.js 上导入

导入“cypress-react-unit-test/support”；

但正如你在这里看到的：

https://github.com/cypress-io/cypress-react-unit-test

此 repo 已移至官方 cypress，我找不到等效的导入。

这是我的 plugins/index.js：

const findWebpack = require('find-webpack')
const webpackPreprocessor = require('@cypress/webpack-preprocessor')

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on) => {
  // find the Webpack config used by react-scripts
  const webpackOptions = findWebpack.getWebpackOptions()

  if (!webpackOptions) {
    throw new Error('Could not find Webpack in this project ????')
  }

  const cleanOptions = {
    reactScripts: true,
  }

  findWebpack.cleanForCypress(cleanOptions, webpackOptions)

  const options = {
    webpackOptions,
    watchOptions: {},
  }

  on('file:preprocessor', webpackPreprocessor(options))
}

【问题讨论】：

在我看来，它不会等待页面呈现，因为使用您的语法 - 它只尝试一次。我建议提前对 Dom 渲染做出某种断言，并且可能会提供指向我们可以测试的页面的链接。

标签： javascript reactjs testing webpack cypress

【解决方案1】：

所以显然我使用了错误的 cypress 模块。

这是为了反应测试

npx cypress open-ct

或

npx cypress run-ct

cypress/plugins/index.js：

const injectDevServer = require("@cypress/react/plugins/react-scripts")

module.exports = (on, config) => {
  injectDevServer(on, config)
  return config
}

【讨论】：