fix: cypress-jsdom -> cypress-root

Author: bahmutov

cypress/component/advanced/react-book-example/src/Todos.spec.js

@@ -22,7 +22,7 @@ it('Todo - should create snapshot', () => {
   // expect(tree).toMatchSnapshot();
 
   // entire test area
-  cy.get('#cypress-jsdom')
+  cy.get('#cypress-root')
     .invoke('html')
     .then(pretty)
     .should(

cypress/component/advanced/renderless/mouse-spec.js

@@ -14,7 +14,7 @@ describe('Renderless component', () => {
       })
     const onMoved = cy.stub()
     mount(<MouseMovement onMoved={onMoved} />)
-    cy.get('#cypress-jsdom').should('be.empty')
+    cy.get('#cypress-root').should('be.empty')
     cy.document()
       .trigger('mousemove')
       .then(() => {

cypress/component/advanced/set-timeout-example/loading-indicator-spec.js

@@ -69,15 +69,15 @@ describe('LoadingIndicator', () => {
         </LoadingIndicator>,
       )
       cy.tick(2010)
-      cy.get('#cypress-jsdom').then($el => {
+      cy.get('#cypress-root').then($el => {
         unmountComponentAtNode($el[0])
       })
       cy.get('@clearTimeout').should('have.been.calledOnce')
     })
   })
 
   afterEach(() => {
-    cy.get('#cypress-jsdom').then($el => {
+    cy.get('#cypress-root').then($el => {
       unmountComponentAtNode($el[0])
     })
   })

cypress/component/advanced/timers/card-without-effect-spec.js

@@ -24,7 +24,7 @@ it('should cleanup on being removed', () => {
     expect(onSelect).to.not.have.been.called
   })
 
-  cy.get('#cypress-jsdom').then($el => {
+  cy.get('#cypress-root').then($el => {
     unmountComponentAtNode($el[0])
   })
 

cypress/component/basic/react-tutorial/pretty-snapshots-spec.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('#cypress-jsdom')
+  cy.get('#cypress-root')
     .invoke('html')
     .then(pretty)
     .should('equal', '<h1>Hello, world!</h1>')

lib/hooks.ts

@@ -1,15 +1,19 @@
 /** Initialize an empty document with root element */
 function renderTestingPlatform() {
+  // Let's mount components under a new div with this id
+  const rootId = 'cypress-root'
+
   const document = cy.state('document') as Document
-  if (document.getElementById('cypress-jsdom')) {
+  if (document.getElementById(rootId)) {
     return
   }
 
   const rootNode = document.createElement('div')
-  rootNode.setAttribute('id', 'cypress-jsdom')
+  rootNode.setAttribute('id', rootId)
   document.getElementsByTagName('body')[0].prepend(rootNode)
 
-  return cy.get('#cypress-jsdom', { log: false })
+  const selector = '#' + rootId
+  return cy.get(selector, { log: false })
 }
 
 before(() => {

lib/index.ts

@@ -3,6 +3,8 @@ import ReactDOM, { unmountComponentAtNode } from 'react-dom'
 import getDisplayName from './getDisplayName'
 import { injectStylesBeforeElement } from './utils'
 
+const rootId = 'cypress-root'
+
 function checkMountModeEnabled() {
   // @ts-ignore
   if (Cypress.spec.specType !== 'component') {
@@ -17,7 +19,7 @@ function checkMountModeEnabled() {
  */
 const injectStyles = (options: MountOptions) => () => {
   const document = cy.state('document')
-  const el = document.getElementById('cypress-jsdom')
+  const el = document.getElementById(rootId)
   return injectStylesBeforeElement(options, document, el)
 }
 
@@ -65,7 +67,7 @@ export const mount = (jsx: React.ReactElement, options: MountOptions = {}) => {
       const document = cy.state('document')
       const reactDomToUse = options.ReactDom || ReactDOM
 
-      const el = document.getElementById('cypress-jsdom')
+      const el = document.getElementById(rootId)
 
       const props = {
         // @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests
@@ -90,7 +92,8 @@ export const unmount = () => {
   checkMountModeEnabled()
 
   cy.log('unmounting...')
-  return cy.get('#cypress-jsdom', { log: false }).then($el => {
+  const selector = '#' + rootId
+  return cy.get(selector, { log: false }).then($el => {
     unmountComponentAtNode($el[0])
   })
 }