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