feat: add wrapper option to mountHook

Author: bahmutov

cypress/component/advanced/hooks/README.md

@@ -3,8 +3,18 @@
 - [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
+- [custom-hook.mount-hook-spec.js](custom-hook.mount-hook-spec.js) shows how `mountHook` can be surrounded with `wrapper` element
 
 ![Hook test](images/hook.png)
 
 Note: hooks are mounted inside a test component following the approach shown in [react-hooks-testing-library](https://github.com/testing-library/react-hooks-testing-library/blob/master/src/pure.js)
+
+Example:
+
+```js
+import { mountHook } from 'cypress-react-unit-test'
+// wrapper is optional, only if your hook requires
+// something like a context provider
+const wrapper = ({ children }) => <Provider store={store}>{children}</Provider>
+mountHook(() => useCustomHook(), { wrapper })
+```

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

@@ -6,9 +6,15 @@ 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)
-    })
+  it('mounted with wrapper', () => {
+    const wrapper = ({ children }) => (
+      <Provider store={store}>{children}</Provider>
+    )
+
+    cy.spy(console, 'log').as('log')
+    mountHook(() => useCustomHook(), { wrapper })
+
+    // make sure the custom hook calls "useEffect"
+    cy.get('@log').should('have.been.calledWith', 'hello world!')
   })
 })

lib/mountHook.ts

@@ -60,21 +60,39 @@ function TestHook({ callback, onError, children }: TestHookProps) {
   return null
 }
 
+type MountHookOptions = {
+  wrapper?: React.ReactElement
+}
+
 /**
  * Mounts a React hook function in a test component for testing.
  *
  * @see https://github.com/bahmutov/cypress-react-unit-test#advanced-examples
  */
-export const mountHook = (hookFn: (...args: any[]) => any) => {
+export const mountHook = (
+  hookFn: (...args: any[]) => any,
+  options: MountHookOptions = {},
+) => {
   const { result, setValue, setError } = resultContainer()
 
-  return mount(
-    React.createElement(TestHook, {
-      callback: hookFn,
-      onError: setError,
-      children: setValue,
-    }),
-  ).then(() => {
+  const testElement = React.createElement(TestHook, {
+    callback: hookFn,
+    onError: setError,
+    children: setValue,
+    key: Math.random().toString(),
+  })
+
+  let mountElement: any = testElement
+  if (options.wrapper) {
+    // what's the proper type? I don't even care anymore
+    // because types for React seem to be a mess
+    // @ts-ignore
+    mountElement = React.createElement(options.wrapper, {
+      children: [testElement],
+    })
+  }
+
+  return mount(mountElement).then(() => {
     cy.wrap(result)
   })
 }