add mount hook demo test for #534

Author: bahmutov

cypress/component/advanced/hooks/README.md

@@ -2,6 +2,8 @@
 
 - [counter-with-hooks.spec.js](counter-with-hooks.spec.js) and [counter2-with-hooks.spec.js](counter2-with-hooks.spec.js) test React components that uses hooks
 - [use-counter.spec.js](use-counter.spec.js) shows how to test a React hook using `mountHook` function
+- [custom-hook.mount-spec.js](custom-hook.mount-spec.js) manually creates a wrapper component around a custom hook that uses Redux provider
+- [custom-hook.mount-hook-spec.js](custom-hook.mount-hook-spec.js) is skipped for now
 
 ![Hook test](images/hook.png)
 

cypress/component/advanced/hooks/count-reducer.js

@@ -0,0 +1,10 @@
+export const countReducer = function(state = 0, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return state + 1
+    case 'DECREMENT':
+      return state - 1
+    default:
+      return state
+  }
+}

cypress/component/advanced/hooks/custom-hook.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react'
+import { useDispatch } from 'react-redux'
+
+export function useCustomHook() {
+  useDispatch()
+
+  useEffect(() => {
+    console.log('hello world!')
+  }, [])
+}

cypress/component/advanced/hooks/custom-hook.mount-hook-spec.js

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mountHook } from 'cypress-react-unit-test'
+const { useCustomHook } = require('./custom-hook')
+import { Provider } from 'react-redux'
+import store from './store'
+
+describe('custom hook that needs redux provider', () => {
+  it.skip('mounted with wrapper', () => {
+    mountHook(() => useCustomHook()).then(result => {
+      console.log(result)
+    })
+  })
+})

cypress/component/advanced/hooks/custom-hook.mount-spec.js

@@ -0,0 +1,23 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+const { useCustomHook } = require('./custom-hook')
+import { Provider } from 'react-redux'
+import store from './store'
+
+describe('custom hook that needs redux provider', () => {
+  it('mounts if we make a test component around it', () => {
+    const App = () => {
+      useCustomHook()
+
+      return <></>
+    }
+    cy.spy(console, 'log').as('log')
+    mount(
+      <Provider store={store}>
+        <App />
+      </Provider>,
+    )
+    cy.get('@log').should('have.been.calledWith', 'hello world!')
+  })
+})

cypress/component/advanced/hooks/store.js

@@ -0,0 +1,6 @@
+import { createStore } from 'redux'
+import { countReducer } from './count-reducer'
+
+const store = createStore(countReducer)
+
+export default store

package-lock.json

@@ -114,9 +114,11 @@
     "react-google-maps": "9.4.5",
     "react-i18next": "11.7.2",
     "react-loading-skeleton": "2.0.1",
+    "react-redux": "7.2.2",
     "react-router": "6.0.0-alpha.1",
     "react-router-dom": "6.0.0-alpha.1",
     "react-scripts": "3.4.1",
+    "redux": "4.0.5",
     "rollup-plugin-istanbul": "2.0.1",
     "semantic-release": "17.2.2",
     "standard": "14.3.3",