Quasar2 Vue3 Cypress component-index.html

Question

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",

From what you are saying, the `cypress.config.js` file might be in the wrong place. Could you show the folder structure of the project - interested to see where `/test` is relative to project root (in fact `/test` should be where `cypress.config.js` is). — Fody, Jul 31 '22 at 05:55
It's in the ROOT of the source tree. Sorted out with the `indexHtmlFile` config like. — Kok How Teh, Jul 31 '22 at 05:56

score 2 · Accepted Answer · answered Jul 31 '22 at 05:37

2

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>

answered Jul 31 '22 at 05:37

Fody

23,754
3
20
37

Yes, `v10+` Added this content but to no avail. Updated my post with the stack trace. I think it is looking at the root folder while it should be looking in `/test/cypress/support`. How to configure it? – Kok How Teh Jul 31 '22 at 05:43

Quasar2 Vue3 Cypress component-index.html

1 Answers1