Quasar2 Vue3 Cypress component-index.html-CodePudding

I don't have any such file component-index.html in my source tree. Any sample of this file available? How should I create it? I run into the following error when running component testing with Cypress:

No element found that matches selector [data-cy-root]. Please add a root element with data-cy-root attribute to your "component-index.html" file so that Cypress can attach your component to the DOM.

Stack dump:

 Error: Child compilation failed:
  Module not found: Error: Can't resolve '/usr/src/khteh/cypress/support/component-index.html' in '/usr/src/khteh'
  ModuleNotFoundError: Module not found: Error: Can't resolve '/usr/src/khteh/cypress/support/component-index.html' in '/usr/src/khteh'
      at /usr/src/khteh/node_modules/webpack/lib/Compilation.js:2016:28
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:798:13
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :10:1)
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:270:22
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :9:1)
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:434:22
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:120:11
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:670:25
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:855:8
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:975:5
      at /usr/src/khteh/node_modules/neo-async/async.js:6883:13
      at /usr/src/khteh/node_modules/webpack/lib/NormalModuleFactory.js:958:45
      at finishWithoutResolve (/usr/src/khteh/node_modules/enhanced-resolve/lib/  Resolver.js:312:11)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:386:15
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :16:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :27:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.  js:87:43
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :15:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :16:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :16:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/Resolver.js:435:5
      at eval (eval at create (/usr/src/khteh/node_modules/tapable/lib/HookCodeF  actory.js:33:10), :27:1)
      at /usr/src/khteh/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.  js:87:43

It looks up the file in the ROOT of my source tree while it should be looking in /test/cypress/support. How to configure it?

Got it:

indexHtmlFile: "test/cypress/support/component-index.html",

CodePudding user response：

It should be under cypress/support folder, normally is added when you configure component testing (assuming Cypress v10 or later).

component-index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
    <div id="__next_css__DO_NOT_USE__"></div>
  </head>
  <body>
    <div data-cy-root></div>
  </body>
</html>