From 222b6c2b2aa8fe76610e8d9e774ea54491313a21 Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Mon, 27 Apr 2020 09:53:04 -0400
Subject: [PATCH] fix: cypress-jsdom -> cypress-root

---
 .../advanced/react-book-example/src/Todos.spec.js      |  2 +-
 cypress/component/advanced/renderless/mouse-spec.js    |  2 +-
 .../set-timeout-example/loading-indicator-spec.js      |  4 ++--
 .../advanced/timers/card-without-effect-spec.js        |  2 +-
 .../basic/react-tutorial/pretty-snapshots-spec.js      |  2 +-
 lib/hooks.ts                                           | 10 +++++++---
 lib/index.ts                                           |  9 ++++++---
 7 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/cypress/component/advanced/react-book-example/src/Todos.spec.js b/cypress/component/advanced/react-book-example/src/Todos.spec.js
index c6fb4598..1fe63266 100644
--- a/cypress/component/advanced/react-book-example/src/Todos.spec.js
+++ b/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(
diff --git a/cypress/component/advanced/renderless/mouse-spec.js b/cypress/component/advanced/renderless/mouse-spec.js
index 3f5de177..d6b6456f 100644
--- a/cypress/component/advanced/renderless/mouse-spec.js
+++ b/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(() => {
diff --git a/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js b/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
index 5558f280..b12a30bd 100644
--- a/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
+++ b/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js
@@ -69,7 +69,7 @@ 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')
@@ -77,7 +77,7 @@ describe('LoadingIndicator', () => {
   })
 
   afterEach(() => {
-    cy.get('#cypress-jsdom').then($el => {
+    cy.get('#cypress-root').then($el => {
       unmountComponentAtNode($el[0])
     })
   })
diff --git a/cypress/component/advanced/timers/card-without-effect-spec.js b/cypress/component/advanced/timers/card-without-effect-spec.js
index 61ec626b..b74e6251 100644
--- a/cypress/component/advanced/timers/card-without-effect-spec.js
+++ b/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])
   })
 
diff --git a/cypress/component/basic/react-tutorial/pretty-snapshots-spec.js b/cypress/component/basic/react-tutorial/pretty-snapshots-spec.js
index 282b8c91..0e141ecf 100644
--- a/cypress/component/basic/react-tutorial/pretty-snapshots-spec.js
+++ b/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>')
diff --git a/lib/hooks.ts b/lib/hooks.ts
index 04609dea..71a51916 100644
--- a/lib/hooks.ts
+++ b/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(() => {
diff --git a/lib/index.ts b/lib/index.ts
index f6c6f787..8623f036 100644
--- a/lib/index.ts
+++ b/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])
   })
 }