Cypress React, cannot find root element to mount the component

Question

Im trying to test my react app, created with (create-react-app) with cypress.

For some reason im getting this error:

As you can see it tries to get an element by ROOT_ID, ROOT_ID it's a const:

All i find to fix this it's an import on cypress/support/index.js

import "cypress-react-unit-test/support";

But as you can see here:

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

This repo has been moved to the official cypress and i can't find the equivalent import.

Here is my 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))
}

Answer 1

So aparently I was using the wrong cypress module.

This is for react testing

npx cypress open-ct

or

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
}