fix search test

src/components/molecules/SearchPriceFilter.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent } from 'react'
+import React, { ChangeEvent, ReactElement } from 'react'
 import SearchFilterSection from '../atoms/SearchFilterSection'
 import usePriceQueryParams from '../../hooks/usePriceQueryParams'
 
@@ -17,7 +17,7 @@ export const PriceInput = ({
   value,
   onChange,
   text
-}: PriceInputProps) => {
+}: PriceInputProps): ReactElement => {
   return (
     <Input
       name={label}

src/components/molecules/Web3Feedback/Wallet.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Wallet.module.css'
 import Button from '../../atoms/Button'
 import { formatNumber } from '../../../utils'
 import { useWeb3 } from '@oceanprotocol/react'
 
-const Wallet = ({ balanceOcean }: { balanceOcean: string }) => {
+const Wallet = ({ balanceOcean }: { balanceOcean: string }): ReactElement => {
   const { account, balance, web3Connect } = useWeb3()
   const ethBalanceText = formatNumber(Number(balance))
   const oceanBalanceText = formatNumber(Number(balanceOcean))
@@ -24,7 +24,7 @@ const Wallet = ({ balanceOcean }: { balanceOcean: string }) => {
           </li>
         </ul>
       ) : (
-        <Button link onClick={() => web3Connect.connect()}>
+        <Button style="text" size="small" onClick={() => web3Connect.connect()}>
           Activate Wallet
         </Button>
       )}

src/components/molecules/Web3Feedback/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Status from '../../atoms/Status'
 import Wallet from './Wallet'
 import styles from './index.module.css'
@@ -19,7 +19,7 @@ export default function Web3Feedback({
   isBalanceInsufficient
 }: {
   isBalanceInsufficient?: boolean
-}) {
+}): ReactElement {
   const { ethProviderStatus } = useWeb3()
   const { status, balanceInOcean } = useOcean()
   const isEthProviderAbsent = ethProviderStatus === -1

src/components/templates/Search.tsx

@@ -11,7 +11,6 @@ import styles from './Search.module.css'
 import { priceQueryParamToWei } from '../../utils'
 import { Aquarius, Logger } from '@oceanprotocol/squid'
 import { config } from '../../config/ocean'
-import { useLocation } from '@reach/router'
 import queryString from 'query-string'
 
 export declare type SearchPageProps = {
@@ -74,8 +73,11 @@ export async function getResults(params: any): Promise<QueryResult> {
   return queryResult
 }
 
-export default function SearchPage(): ReactElement {
-  const location = useLocation()
+export default function SearchPage({
+  location
+}: {
+  location: Location
+}): ReactElement {
   const parsed = queryString.parse(location.search)
   const { text, tag } = parsed
   const [queryResult, setQueryResult] = useState<QueryResult>()

src/pages/search.tsx

@@ -3,6 +3,13 @@ import PageSearch from '../components/templates/Search'
 import { PageProps } from 'gatsby'
 import Layout from '../components/Layout'
 import queryString from 'query-string'
+import {
+  Router,
+  Link,
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from '@reach/router'
 
 export default function PageGatsbySearch(props: PageProps): ReactElement {
   const parsed = queryString.parse(props.location.search)
@@ -10,7 +17,7 @@ export default function PageGatsbySearch(props: PageProps): ReactElement {
 
   return (
     <Layout title={`Search for ${text || tag}`} location={props.location}>
-      <PageSearch />
+      <PageSearch location={location} />
     </Layout>
   )
 }

tests/unit/pages/index.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Home from '../../../src/pages/index'
+import Home from '../../../src/components/pages/Home'
 
 describe('Home', () => {
   it('renders without crashing', () => {

tests/unit/pages/search.test.tsx

@@ -1,20 +1,20 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
-import Search from '../../../src/pages/search'
-import ddo from '../__fixtures__/ddo'
-import { DDO } from '@oceanprotocol/squid'
-import { QueryResult } from '@oceanprotocol/squid/dist/node/aquarius/Aquarius'
+import Search from '../../../src/components/templates/search'
+import {
+  createHistory,
+  createMemorySource,
+  LocationProvider
+} from '@reach/router'
 
 describe('Search', () => {
   it('renders without crashing', async () => {
-    const queryResult = {
-      results: [new DDO(ddo), new DDO(ddo)],
-      page: 1,
-      totalPages: 10,
-      totalResults: 200
-    }
+    const history = createHistory(createMemorySource('/search?text=water'))
+
     const { container } = render(
-      <Search text="Hello" tag="Hello" queryResult={queryResult} />
+      <LocationProvider history={history}>
+        <Search location={{ search: '?text=water' } as any} />
+      </LocationProvider>
     )
     expect(container.firstChild).toBeInTheDocument()
 
@@ -32,25 +32,5 @@ describe('Search', () => {
 
     button && fireEvent.click(button)
     form && fireEvent.submit(form)
-
-    // interact with pagination
-    const pageItem = container.querySelector(
-      '.pagination li:nth-child(3) .number'
-    )
-
-    pageItem && fireEvent.click(pageItem)
-  })
-
-  it('renders empty state', async () => {
-    const queryResult: QueryResult = {
-      results: [],
-      page: 1,
-      totalPages: 1,
-      totalResults: 0
-    }
-    const { container } = render(
-      <Search text="Hello" tag="Hello" queryResult={queryResult} />
-    )
-    expect(container.querySelector('.empty')).toBeInTheDocument()
   })
 })

tests/unit/testRender.ts

@@ -1,12 +1,10 @@
 import { render } from '@testing-library/react'
 import { ReactElement } from 'react'
 
-const testRender = (component: ReactElement): void => {
+export default function testRender(component: ReactElement): void {
   it('renders without crashing', () => {
     const { container } = render(component)
 
     expect(container.firstChild).toBeInTheDocument()
   })
 }
-
-export default testRender