feat: swap the #__cy_root id selector to become data-cy-root for comp…

…onent mounting (#20951) * Change #__cy_root selector for CT mounting point to be a data-cy-root selector * moving all of the gets for the container element into the mount-utils * Force HTMLElement instead of Element * unskip vue2 tests Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com> Co-authored-by: Tim Griesser <tgriesser10@gmail.com>
cypress-io · Apr 13, 2022 · 0e7b555 · 0e7b555 · cypress-bot · Apr 13, 2022
1 parent 17905a7
commit 0e7b555
Show file tree

Hide file tree

Showing 137 changed files with 6,697 additions and 106,770 deletions.
diff --git a/npm/angular/cypress/support/component-index.html b/npm/angular/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
-</html>
+</html>
diff --git a/npm/design-system/cypress/support/component-index.html b/npm/design-system/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/mount-utils/src/index.ts b/npm/mount-utils/src/index.ts
@@ -37,7 +37,17 @@ export interface StyleOptions {
   cssFile: string | string[]
 }
 
-export const ROOT_ID = '__cy_root'
+export const ROOT_SELECTOR = '[data-cy-root]'
+
+export const getContainerEl = (): HTMLElement => {
+  const el = document.querySelector<HTMLElement>(ROOT_SELECTOR)
+
+  if (el) {
+    return el
+  }
+
+  throw Error(`No element found that matches selector ${ROOT_SELECTOR}. Please use the mount utils to mount it properly`)
+}
 
 /**
  * Remove any style or extra link elements from the iframe placeholder
@@ -131,7 +141,7 @@ export const injectStylesBeforeElement = (
   options: Partial<StyleOptions & { log: boolean }>,
   document: Document,
   el: HTMLElement | null,
-) => {
+): HTMLElement => {
   if (!el) return
 
   // first insert all stylesheets as Link elements

diff --git a/npm/react/cypress/component/advanced/react-book-example/src/Todos.cy.js b/npm/react/cypress/component/advanced/react-book-example/src/Todos.cy.js
@@ -23,7 +23,7 @@ it('Todo - should create snapshot', () => {
   // expect(tree).toMatchSnapshot();
 
   // entire test area
-  cy.get('#__cy_root')
+  cy.get('[data-cy-root]')
   .invoke('html')
   .then(pretty)
   .should(

diff --git a/npm/react/cypress/component/advanced/renderless/mouse.cy.js b/npm/react/cypress/component/advanced/renderless/mouse.cy.js
@@ -16,7 +16,7 @@ describe('Renderless component', () => {
     const onMoved = cy.stub()
 
     mount(<MouseMovement onMoved={onMoved} />)
-    cy.get('#__cy_root').should('be.empty')
+    cy.get('[data-cy-root]').should('be.empty')
     cy.document()
     .trigger('mousemove')
     .then(() => {

diff --git a/npm/react/cypress/component/basic/react-tutorial/pretty-snapshots.cy.js b/npm/react/cypress/component/basic/react-tutorial/pretty-snapshots.cy.js
@@ -7,7 +7,7 @@ import pretty from 'pretty'
 it('says hello world', () => {
   mount(<Hello name="world" />)
   cy.contains('Hello, world!').should('be.visible')
-  cy.get('#__cy_root')
+  cy.get('[data-cy-root]')
   .invoke('html')
   .then(pretty)
   .should('equal', '<h1>Hello, world!</h1>')

diff --git a/npm/react/cypress/support/component-index.html b/npm/react/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/craco/cypress/support/component-index.html b/npm/react/examples/craco/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/find-webpack/cypress.config.ts b/npm/react/examples/find-webpack/cypress.config.ts
@@ -31,7 +31,7 @@ export default defineConfig({
   },
   'env': {
     'cypress-react-selector': {
-      'root': '#__cy_root',
+      'root': '[data-cy-root]',
     },
   },
 })
diff --git a/npm/react/examples/find-webpack/cypress/support/component-index.html b/npm/react/examples/find-webpack/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/nextjs-webpack-5/cypress/support/component-index.html b/npm/react/examples/nextjs-webpack-5/cypress/support/component-index.html
@@ -8,6 +8,6 @@
     <div id="__next_css__DO_NOT_USE__"></div>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/nextjs/cypress/support/component-index.html b/npm/react/examples/nextjs/cypress/support/component-index.html
@@ -8,6 +8,6 @@
     <div id="__next_css__DO_NOT_USE__"></div>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/react-scripts-folder/cypress/support/component-index.html b/npm/react/examples/react-scripts-folder/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/react-scripts-typescript/cypress/support/component-index.html b/npm/react/examples/react-scripts-typescript/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/react-scripts/cypress/support/component-index.html b/npm/react/examples/react-scripts/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/sass-and-ts/cypress/support/component-index.html b/npm/react/examples/sass-and-ts/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/snapshots/cypress/support/component-index.html b/npm/react/examples/snapshots/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/using-babel-typescript/cypress/support/component-index.html b/npm/react/examples/using-babel-typescript/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/using-babel/cypress/support/component-index.html b/npm/react/examples/using-babel/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-sudoku/cypress/support/component-index.html b/npm/react/examples/visual-sudoku/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-applitools/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-happo/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html b/npm/react/examples/visual-testing-with-percy/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/webpack-file/cypress/support/component-index.html b/npm/react/examples/webpack-file/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/examples/webpack-options/cypress/support/component-index.html b/npm/react/examples/webpack-options/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/react/package.json b/npm/react/package.json
@@ -21,7 +21,7 @@
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {
-    "@cypress/mount-utils": "*",
+    "@cypress/mount-utils": "file:../mount-utils",
     "debug": "^4.3.2",
     "find-webpack": "2.2.1",
     "find-yarn-workspace-root": "2.0.0"

diff --git a/npm/react/src/mount.ts b/npm/react/src/mount.ts
@@ -4,16 +4,17 @@ import getDisplayName from './getDisplayName'
 import {
   injectStylesBeforeElement,
   StyleOptions,
-  ROOT_ID,
+  getContainerEl,
+  ROOT_SELECTOR,
   setupHooks,
 } from '@cypress/mount-utils'
 
 /**
  * Inject custom style text or CSS file or 3rd party style resources
  */
 const injectStyles = (options: MountOptions) => {
-  return () => {
-    const el = document.getElementById(ROOT_ID)
+  return (): HTMLElement => {
+    const el = getContainerEl()
 
     return injectStylesBeforeElement(options, document, el)
   }
@@ -66,12 +67,12 @@ const _mount = (type: 'mount' | 'rerender', jsx: React.ReactNode, options: Mount
 
     lastMountedReactDom = reactDomToUse
 
-    const el = document.getElementById(ROOT_ID)
+    const el = getContainerEl()
 
     if (!el) {
       throw new Error(
         [
-          '[@cypress/react] 🔥 Hmm, cannot find root element to mount the component.',
+          `[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`,
         ].join(' '),
       )
     }
@@ -156,9 +157,7 @@ export const unmount = (options = { log: true }): globalThis.Cypress.Chainable<J
 
 const _unmount = (options: { boundComponentMessage?: string, log: boolean }) => {
   return cy.then(() => {
-    const selector = `#${ROOT_ID}`
-
-    return cy.get(selector, { log: false }).then(($el) => {
+    return cy.get(ROOT_SELECTOR, { log: false }).then(($el) => {
       if (lastMountedReactDom) {
         const wasUnmounted = lastMountedReactDom.unmountComponentAtNode($el[0])
 
@@ -185,7 +184,7 @@ const _unmount = (options: { boundComponentMessage?: string, log: boolean }) =>
 // NOTE: we cannot use unmount here because
 // we are not in the context of a test
 const preMountCleanup = () => {
-  const el = document.getElementById(ROOT_ID)
+  const el = getContainerEl()
 
   if (el && lastMountedReactDom) {
     lastMountedReactDom.unmountComponentAtNode(el)

diff --git a/npm/vite-dev-server/README.md b/npm/vite-dev-server/README.md
@@ -41,7 +41,7 @@ Install `@cypress/vue` or `@cypress/react` to get this package working properly
 - Responds to every query with the prefix `__cypress/src/` (base path should be this prefix).
 - Responds to `__cypress/src/index.html` with an html page. 
     This page
-    - will contain an element `<div id="__cy_root"></div>`. Tis will be used by mount function to mount the app containing the components we want.
+    - will contain an element `<div data-cy-root></div>`. Tis will be used by mount function to mount the app containing the components we want.
     - will load support files
     - will load the current spec from the url
     - will start the test when both files are done loading

diff --git a/npm/vite-dev-server/cypress/support/component-index.html b/npm/vite-dev-server/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/vite-dev-server/src/plugins/cypress.ts b/npm/vite-dev-server/src/plugins/cypress.ts
@@ -55,7 +55,7 @@ export const Cypress = (
 
       // insert the script in the end of the body
       return `${indexHtmlContent.substring(0, endOfBody)
-    }<script>
+    }<script type="module">
     ${loader}
     </script>${
       indexHtmlContent.substring(endOfBody)

diff --git a/npm/vue/cypress/support/component-index.html b/npm/vue/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/vue/examples/code-coverage/cypress/support/component-index.html b/npm/vue/examples/code-coverage/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/vue/examples/vue-cli/cypress/support/component-index.html b/npm/vue/examples/vue-cli/cypress/support/component-index.html
@@ -7,6 +7,6 @@
     <title>Components App</title>
   </head>
   <body>
-    <div id="__cy_root"></div>
+    <div data-cy-root></div>
   </body>
 </html>
diff --git a/npm/vue/package.json b/npm/vue/package.json
@@ -16,7 +16,7 @@
     "test:ci:ct": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env"
   },
   "dependencies": {
-    "@cypress/mount-utils": "*",
+    "@cypress/mount-utils": "file:../mount-utils",
     "@vue/test-utils": "2.0.0-rc.19"
   },
   "devDependencies": {