text: /// <reference types="cypress" />
  import React from 'react'
  import { mount } from '@cypress/react'
  
  class Foo extends React.Component {
    constructor (props) {
      super(props)
  
      this.state = {
        count: 0,
      }
    }
  
    componentDidMount () {
      console.log('componentDidMount called')
    }
  
    componentDidUpdate () {
      console.log('componentDidUpdate called')
    }
  
    render () {
      const { id, foo } = this.props
  
      return (
        <div className={id}>
          {foo} count {this.state.count}
        </div>
      )
    }
  }
  
  describe('Enzyme', () => {
    context('setState', () => {
      it('sets component state', () => {
        // get the component reference using "ref" prop
        // and place it into the object for Cypress to "wait" for it
        let c = {}
  
        mount(<Foo id="foo" foo="initial" ref={(i) => (c.instance = i)} />)
        cy.contains('initial').should('be.visible')
  
        cy.log('**check state**')
        cy.wrap(c)
        .its('instance.state')
        .should('deep.equal', { count: 0 })
  
        cy.log('**setState**')
        cy.wrap(c)
        .its('instance')
        .invoke('setState', { count: 10 })
  
        cy.wrap(c)
        .its('instance.state')
        .should('deep.equal', { count: 10 })
  
        cy.contains('initial count 10')
      })
    })
  })
  