trying to make sense of jest and mocking reach router, useWeb3, useOcean, squid

.storybook/preview.js

@@ -1,11 +1,19 @@
 import React from 'react'
 import { addDecorator } from '@storybook/react'
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from '@reach/router'
 
 // Import global css with custom properties once for all stories.
 import '../src/global/styles.css'
 
 // Wrapper for all stories previews
+const history = createHistory(createMemorySource('/'))
+
 addDecorator((storyFn) => (
+  <LocationProvider history={history}>
     <div
       style={{
         minHeight: '100vh',
@@ -15,6 +23,7 @@ addDecorator((storyFn) => (
     >
       {storyFn()}
     </div>
+  </LocationProvider>
 ))
 
 // Gatsby's Link overrides:

package.json

@@ -70,13 +70,12 @@
   "devDependencies": {
     "@babel/core": "^7.10.3",
     "@babel/preset-typescript": "^7.10.1",
-    "@storybook/addon-actions": "^5.3.19",
+    "@storybook/addon-actions": "^6.0.0-beta.37",
     "@storybook/addon-storyshots": "^6.0.0-beta.37",
     "@storybook/react": "^6.0.0-beta.37",
     "@svgr/webpack": "^5.4.0",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.3",
-    "@testing-library/react-hooks": "^3.3.0",
     "@types/jest": "^26.0.3",
     "@types/node": "^14.0.14",
     "@types/numeral": "^0.0.28",
@@ -99,6 +98,7 @@
     "jest": "^26.1.0",
     "node-mocks-http": "^1.8.1",
     "prettier": "^2.0.5",
+    "react-test-renderer": "^16.13.1",
     "serve": "^11.3.2",
     "source-map-explorer": "^2.4.2",
     "typescript": "^3.9.5"

src/hooks/useSiteMetadata.ts

@@ -2,7 +2,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 
 const query = graphql`
   query {
-    allFile(filter: { relativePath: { eq: "site.json" } }) {
+    siteMetadata: allFile(filter: { relativePath: { eq: "site.json" } }) {
       edges {
         node {
           childContentJson {
@@ -33,5 +33,5 @@ const query = graphql`
 
 export function useSiteMetadata() {
   const data = useStaticQuery(query)
-  return data.allFile.edges[0].node.childContentJson.site
+  return data.siteMetadata.edges[0].node.childContentJson.site
 }

tests/unit/Layout.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import testRender from './testRender'
-import Layout from '../../src/components/Layout'
-
-describe('Layout', () => {
-  testRender(
-    <Layout location={{ href: 'https://demo.com' } as Location}>Hello</Layout>
-  )
-})

tests/unit/__fixtures__/siteMetadata.json

@@ -0,0 +1,36 @@
+{
+  "siteMetadata": {
+    "edges": [
+      {
+        "node": {
+          "childContentJson": {
+            "site": {
+              "siteTitle": "Ocean Market",
+              "siteTagline": "A marketplace to find and publish open data sets in the Ocean Network.",
+              "siteUrl": "https://market.oceanprotocol.now.sh/",
+              "siteIcon": "node_modules/@oceanprotocol/art/logo/favicon-white.png",
+              "siteImage": {
+                "childImageSharp": {
+                  "original": {
+                    "src": "/static/share-5558ae2d9f99864a95f6f99172be9768.png"
+                  }
+                }
+              },
+              "copyright": "All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)",
+              "menu": [
+                {
+                  "name": "Publish",
+                  "link": "/publish"
+                },
+                {
+                  "name": "History",
+                  "link": "/history"
+                }
+              ]
+            }
+          }
+        }
+      }
+    ]
+  }
+}

tests/unit/__mocks__/@oceanprotocol/react.tsx

@@ -0,0 +1,57 @@
+import React, { ReactElement } from 'react'
+import squidMock from './squid'
+import web3ProviderMock from '../web3provider'
+
+const reactMock = {
+  Web3Provider: function Component({
+    children
+  }: {
+    children: ReactElement
+  }): ReactElement {
+    return <div>{children}</div>
+  },
+  OceanProvider: function Component({
+    children
+  }: {
+    children: ReactElement
+  }): ReactElement {
+    return <div>{children}</div>
+  },
+  useOcean: () => {
+    return {
+      ocean: squidMock.ocean
+    }
+  },
+  useWeb3: () => {
+    return {
+      ...web3ProviderMock,
+      account: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
+      ethProviderStatus: 1
+    }
+  },
+  useConsume: () => {
+    return {
+      consume: () => null as any,
+      consumeStepText: '',
+      isLoading: false
+    }
+  },
+  useCompute: () => {
+    return {
+      compute: () => null as any,
+      isLoading: false,
+      computeStepText: 0,
+      computeError: ''
+    }
+  },
+  useMetadata: () => {
+    return {
+      getCuration: () => {
+        return Promise.resolve({ rating: 0, numVotes: 0 })
+      }
+    }
+  },
+  computeOptions: ['', '']
+}
+
+export default reactMock

tests/unit/__mocks__/@oceanprotocol/squid.ts

@@ -0,0 +1,95 @@
+import ddo from '../../__fixtures__/ddo'
+import job from '../../__fixtures__/job'
+
+const aquarius = {
+  queryMetadata: () => {
+    return {
+      results: [] as any[],
+      totalResults: 1,
+      totalPages: 1
+    }
+  }
+}
+
+const squidMock = {
+  Aquarius: () => aquarius,
+  DDO: () => ddo,
+  ocean: {
+    accounts: {
+      list: () => ['xxx', 'xxx']
+    },
+    aquarius,
+    compute: {
+      status: (account: string) => {
+        return [job]
+      }
+    },
+    assets: {
+      query: () => {
+        return {
+          results: [ddo] as any[],
+          page: 1,
+          total_pages: 1611,
+          total_results: 1611
+        }
+      },
+      resolve: () => null as any,
+      order: () => {
+        return {
+          next: () => null as any
+        }
+      },
+      consume: () => null as any,
+      getFreeWhiteList: () => Promise.resolve([])
+    },
+    keeper: {
+      conditions: {
+        accessSecretStoreCondition: {
+          getGrantedDidByConsumer: () => {
+            return {
+              find: Promise.resolve(
+                'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
+              )
+            }
+          }
+        }
+      },
+      agreementStoreManager: {
+        getAgreement: (agreementId: string) =>
+          Promise.resolve({
+            did:
+              'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
+          })
+      }
+    },
+    versions: {
+      get: () =>
+        Promise.resolve({
+          squid: {
+            name: 'Squid-js',
+            status: 'Working'
+          },
+          aquarius: {
+            name: 'Aquarius',
+            status: 'Working'
+          },
+          brizo: {
+            name: 'Brizo',
+            network: 'Nile',
+            status: 'Working',
+            contracts: {
+              hello: 'hello',
+              hello2: 'hello2'
+            }
+          },
+          status: {
+            ok: true,
+            network: true,
+            contracts: true
+          }
+        })
+    }
+  }
+}
+
+export default squidMock

tests/unit/__mocks__/ocean-mock.ts

@@ -1,89 +0,0 @@
-import ddo from '../__fixtures__/ddo'
-import job from '../__fixtures__/job'
-
-const oceanMock = {
-  accounts: {
-    list: () => ['xxx', 'xxx']
-  },
-  aquarius: {
-    queryMetadata: () => {
-      return {
-        results: [] as any[],
-        totalResults: 1,
-        totalPages: 1
-      }
-    }
-  },
-  compute: {
-    status: (account: string) => {
-      return [job]
-    }
-  },
-  assets: {
-    query: () => {
-      return {
-        results: [ddo] as any[],
-        page: 1,
-        total_pages: 1611,
-        total_results: 1611
-      }
-    },
-    resolve: () => null as any,
-    order: () => {
-      return {
-        next: () => null as any
-      }
-    },
-    consume: () => null as any,
-    getFreeWhiteList: () => Promise.resolve([])
-  },
-  keeper: {
-    conditions: {
-      accessSecretStoreCondition: {
-        getGrantedDidByConsumer: () => {
-          return {
-            find: Promise.resolve(
-              'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
-            )
-          }
-        }
-      }
-    },
-    agreementStoreManager: {
-      getAgreement: (agreementId: string) =>
-        Promise.resolve({
-          did:
-            'did:op:e6fda48e8d814d5d9655645aac3c046cc87528dbc1a9449799e579d7b83d1360'
-        })
-    }
-  },
-  versions: {
-    get: () =>
-      Promise.resolve({
-        squid: {
-          name: 'Squid-js',
-          status: 'Working'
-        },
-        aquarius: {
-          name: 'Aquarius',
-          status: 'Working'
-        },
-        brizo: {
-          name: 'Brizo',
-          network: 'Nile',
-          status: 'Working',
-          contracts: {
-            hello: 'hello',
-            hello2: 'hello2'
-          }
-        },
-        status: {
-          ok: true,
-          network: true,
-          contracts: true
-        }
-      })
-  }
-}
-
-export default oceanMock

tests/unit/components/Layout.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import testRender from '../testRender'
+import Layout from '../../../src/components/Layout'
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from '@reach/router'
+
+describe('Layout', () => {
+  const history = createHistory(createMemorySource('/'))
+
+  testRender(
+    <LocationProvider history={history}>
+      <Layout location={{ href: 'https://demo.com' } as Location}>Hello</Layout>
+    </LocationProvider>
+  )
+})

tests/unit/pages/index.test.tsx

@@ -1,10 +1,21 @@
 import React from 'react'
 import { render } from '@testing-library/react'
 import Home from '../../../src/components/pages/Home'
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from '@reach/router'
 
 describe('Home', () => {
   it('renders without crashing', () => {
-    const { container } = render(<Home />)
+    const history = createHistory(createMemorySource('/search?text=water'))
+
+    const { container } = render(
+      <LocationProvider history={history}>
+        <Home />
+      </LocationProvider>
+    )
     expect(container.firstChild).toBeInTheDocument()
   })
 })

tests/unit/pages/publish.test.tsx

@@ -1,38 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Publish from '../../../src/pages/publish'
+import Publish from '../../../src/components/pages/Publish'
-import web3ProviderMock from '../__mocks__/web3provider'
-import oceanMock from '../__mocks__/ocean-mock'
-
-// eslint-disable-next-line
-jest.mock('@oceanprotocol/react', () => ({
-  useOcean: () => {
-    return {
-      ocean: oceanMock
-    }
-  },
-  useWeb3: () => {
-    return {
-      web3: web3ProviderMock,
-      account: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
-      ethProviderStatus: 1
-    }
-  },
-  useConsume: () => {
-    return {
-      consume: () => null as any,
-      consumeStepText: '',
-      isLoading: false
-    }
-  },
-  useMetadata: () => {
-    return {
-      getCuration: () => {
-        return Promise.resolve({ rating: 0, numVotes: 0 })
-      }
-    }
-  }
-}))
 
 describe('Home', () => {
   it('renders without crashing', () => {

tests/unit/setupTests.ts

@@ -1,10 +1,26 @@
 import '@testing-library/jest-dom/extend-expect'
+import * as Gatsby from 'gatsby'
+import siteMetadata from './__fixtures__/siteMetadata.json'
+import mockReact from './__mocks__/@oceanprotocol/react'
 
 if (typeof window.IntersectionObserver === 'undefined') {
   import('intersection-observer')
 }
 
+import('./__mocks__/matchMedia')
+
+const useStaticQuery = jest.spyOn(Gatsby, 'useStaticQuery')
+// const useWeb3 = jest.spyOn(oceanReact, 'useWeb3')
+// const useOcean = jest.spyOn(oceanReact, 'useOcean')
+
+export const globalMock = {
+  ...siteMetadata
+}
+
 beforeAll(() => {
-  require('./__mocks__/matchMedia')
   jest.mock('web3')
+  jest.mock('@oceanprotocol/react')
+
+  // useOcean.mockImplementation(() => mockReact.useOcean())
+  useStaticQuery.mockImplementation(() => globalMock)
 })

tests/unit/storyshots.test.tsx

@@ -1,86 +1,12 @@
 import initStoryshots from '@storybook/addon-storyshots'
 import { render, wait } from '@testing-library/react'
-import oceanMock from './__mocks__/ocean-mock'
-import web3ProviderMock from './__mocks__/web3'
-
-// eslint-disable-next-line
-jest.mock('@oceanprotocol/react', () => ({
-  useOcean: () => {
-    return {
-      ocean: oceanMock
-    }
-  },
-  useWeb3: () => {
-    return {
-      web3: web3ProviderMock,
-      account: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
-      ethProviderStatus: 1
-    }
-  },
-  useConsume: () => {
-    return {
-      consume: () => null as any,
-      consumeStepText: '',
-      isLoading: false
-    }
-  },
-  useMetadata: () => {
-    return {
-      getCuration: () => {
-        return Promise.resolve({ rating: 0, numVotes: 0 })
-      }
-    }
-  }
-}))
-// jest.mock('@oceanprotocol/squid')
 
 // Stories are render-tested with @testing-library/react,
 // overwriting default snapshot testing behavior
-
-// eslint-disable-next-line
-jest.mock('@oceanprotocol/react', () => ({
-  useOcean: () => {
-    return {
-      ocean: oceanMock
-    }
-  },
-  useWeb3: () => {
-    return {
-      web3: web3ProviderMock,
-      account: '0x0000000011111111aaaaaaaabbbbbbbb22222222',
-      ethProviderStatus: 1
-    }
-  },
-  useConsume: () => {
-    return {
-      consume: () => null as any,
-      consumeStepText: '',
-      isLoading: false
-    }
-  },
-  useCompute: () => {
-    return {
-      compute: () => null as any,
-      isLoading: false,
-      computeStepText: 0,
-      computeError: ''
-    }
-  },
-  useMetadata: () => {
-    return {
-      getCuration: () => {
-        return Promise.resolve({ rating: 0, numVotes: 0 })
-      }
-    }
-  },
-  computeOptions: ['', '']
-}))
-
 initStoryshots({
   asyncJest: true,
   test: async ({ story, done }) => {
     const storyElement = story.render()
-
     // render the story with @testing-library/react
     render(storyElement)
     await wait(() => done())