feat: use Cypress.component() to get the mounted component

Author: bahmutov

README.md

@@ -14,10 +14,13 @@ describe('HelloState component', () => {
     // mount the component under test
     mount(<HelloState />)
     // start testing!
-    cy.contains('Hello Spider-man!').then(() => {
-      // mounted component is at Cypress.component
-      Cypress.component.setState({ name: 'React' })
+    cy.contains('Hello Spider-man!')
+    // mounted component is returned from Cypress.component()
+    Cypress.component().invoke('setState', {name: 'React'})
+    Cypress.component().its('state').should('deep.equal', {
+      name: 'React'
     })
+    // check if GUI has rerendered
     cy.contains('Hello React!')
   })
 })
@@ -32,4 +35,5 @@ All components are in [src](src) folder. All tests are in [cypress/integration](
 * [hello-world-spec.js](cypress/integration/hello-world-spec.js) - testing the simplest React component from [hello-world.jsx](src/hello-world.jsx)
 * [hello-x-spec.js](cypress/integration/hello-x-spec.js) - testing React component with props and state [hello-x.jsx](src/hello-x.jsx)
 * [counter-spec.js](cypress/integration/counter-spec.js) clicks on the component and confirms the result
+* [stateless-spec.js](cypress/integration/stateless-spec.js) shows testing a stateless component from [stateless.jsx](src/stateless.jsx)
 * separate repo [bahmutov/calculator](https://github.com/bahmutov/calculator) tests multiple components

cypress/integration/hello-x-spec.js

@@ -15,6 +15,9 @@ describe('HelloState component', () => {
     mount(<HelloState />)
     cy.contains('Hello Spider-man!')
     Cypress.component().invoke('setState', {name: 'React'})
+    Cypress.component().its('state').should('deep.equal', {
+      name: 'React'
+    })
     cy.contains('Hello React!')
   })
 })

cypress/integration/stateless-spec.js

@@ -0,0 +1,22 @@
+import HelloWorld from '../../src/stateless.jsx'
+import React from 'react'
+import { mount } from '../../lib'
+
+/* eslint-env mocha */
+describe('Stateless component', () => {
+  beforeEach(() => {
+    // pass spy and save it under an alias
+    // so we can easily get it later with cy.get('@greeting')
+    const spy = cy.spy().as('greeting')
+    mount(<HelloWorld name="Test Aficionado" click={spy} />)
+  })
+
+  it('shows link', () => {
+    cy.contains('a', 'Say Hi')
+  })
+
+  it('alerts with name', () => {
+    cy.contains('Say Hi').click()
+    cy.get('@greeting').should('be.calledWith', 'Hi Test Aficionado')
+  })
+})

src/stateless.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+// example stateless component from
+// https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc
+const HelloWorld = ({name, click}) => {
+
+  return (
+    <div>
+      <a href="#"
+        onClick={click(`Hi ${name}`)}>Say Hi</a>
+    </div>
+  )
+}
+
+export default HelloWorld