add counter with hooks spec

Author: bahmutov

README.md

@@ -63,7 +63,8 @@ Look at the examples in [cypress/component](cypress/component) folder. Here is t
 Spec | Description
 --- | ---
 [alert-spec.js](cypress/component/basic/alert-spec.js) | Component tries to use `window.alert`
-[counter-spec.js](cypress/component/basic/counter-spec.js) | Counter component that uses `this.state`
+[counter-set-state](cypress/component/basic/counter-set-state) | Counter component that uses `this.state`
+[counter-use-hooks](cypress/component/basic/counter-use-hooks) | Counter component that uses `useState` hook
 [emotion-spec.js](cypress/component/basic/emotion-spec.js) | Confirms the component is using `@emotion/core` and styles are set
 [error-boundary-spec.js](cypress/component/basic/error-boundar-spec.js) | Checks if an error boundary component works
 [pure-component-spec.js](cypress/component/basic/pure-component.spec.js) | Tests stateless component

cypress/component/basic/counter-spec.js renamed to cypress/component/basic/counter-set-state/counter-spec.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import Counter from './counter.jsx'
+
+describe('Counter using hooks', () => {
+  it('works', () => {
+    mount(<Counter />)
+    cy.contains('You clicked 0 times')
+    cy.contains('Click me')
+      .click()
+      .click()
+      .click()
+    cy.contains('You clicked 3 times')
+  })
+})

cypress/component/basic/counter.jsx renamed to cypress/component/basic/counter-set-state/counter.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+
+// example from https://reactjs.org/docs/hooks-state.html
+function Counter() {
+  // Declare a new state variable, which we'll call "count"
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>Click me</button>
+    </div>
+  )
+}
+
+export default Counter

cypress/component/basic/counter-use-hooks/counter-hooks-spec.js

@@ -2,7 +2,6 @@
 /// <reference types="../../lib" />
 import { Transpiled } from './transpiled.jsx'
 import React from 'react'
-import ReactDom from 'react-dom'
 import { mount } from 'cypress-react-unit-test'
 
 /* eslint-env mocha */