feat: working components, close #3

bahmutov · bahmutov · commit 65b54bacaad4 · 2018-01-01T17:50:53.000-05:00
diff --git a/cypress.json b/cypress.json
@@ -1,4 +1,5 @@
 {
   "viewportWidth": 300,
-  "viewportHeight": 100
+  "viewportHeight": 100,
+  "port": 3456
 }
diff --git a/cypress/integration/counter-spec.js b/cypress/integration/counter-spec.js
@@ -12,4 +12,36 @@ describe('Counter', () => {
       .click()
       .contains('count: 2')
   })
+
+  it('counts clicks 2', () => {
+    mount(<Counter />)
+    cy.contains('count: 0')
+      .click()
+      .contains('count: 1')
+      .click()
+      .contains('count: 2')
+  })
+})
+
+describe('Counter mounted before each test', () => {
+  beforeEach(() => {
+    mount(<Counter />)
+  })
+
+  it('goes to 3', () => {
+    cy.contains('count: 0')
+      .click()
+      .click()
+      .click()
+      .contains('count: 3')
+  })
+
+  it('has count in state', () => {
+    cy.contains('count: 0')
+      .click()
+      .click()
+      .click()
+    Cypress.component().its('state')
+      .should('deep.equal', {count: 3})
+  })
 })
diff --git a/cypress/integration/hello-x-spec.js b/cypress/integration/hello-x-spec.js
@@ -11,11 +11,10 @@ describe('HelloX component', () => {
 })
 
 describe('HelloState component', () => {
-  it('works', () => {
+  it('changes state', () => {
     mount(<HelloState />)
-    cy.contains('Hello Spider-man!').then(() => {
-      Cypress.component.setState({ name: 'React' })
-    })
+    cy.contains('Hello Spider-man!')
+    Cypress.component().invoke('setState', {name: 'React'})
     cy.contains('Hello React!')
   })
 })
diff --git a/lib/index.js b/lib/index.js
@@ -1,5 +1,3 @@
-import { render } from 'react-dom'
-
 // having weak reference to styles prevents garbage collection
 // and "losing" styles when the next test starts
 const stylesCache = new Map()
@@ -39,13 +37,27 @@ const copyStyles = component => {
 
 /* eslint-env mocha */
 export const mount = jsx => {
-  const html = '<body><div id="app"></div></body>'
+  // include React and ReactDOM from CDN to force DOM to register all DOM event listeners
+  // otherwise the component will NOT be able to dispatch any events
+  // when it runs the second time
+  // https://github.com/bahmutov/cypress-react-unit-test/issues/3
+  const html = `<body>
+    <div id="app"></div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
+  </body>`
 
   const document = cy.state('document')
   document.write(html)
   document.close()
 
-  Cypress.component = render(jsx, document.getElementById('app'))
+  cy.window({ log: false})
+    .its('ReactDOM.render')
+    .then(render => {
+      Cypress._component = render(jsx, document.getElementById('app'))
+      Cypress.component = () =>
+        cy.then(() => Cypress._component)
+    })
 
   copyStyles(jsx)
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`{`
`2`	`2`	`"viewportWidth": 300,`
`3`		`- "viewportHeight": 100`
	`3`	`+ "viewportHeight": 100,`
	`4`	`+ "port": 3456`
`4`	`5`	`}`