mock useParams

studio/__mocks__/hooks.js

@@ -4,7 +4,7 @@ export const checkPermissions = jest.fn().mockReturnValue(true)
 const { useStore, StoreProvider } = jest.requireActual('hooks')
 export const useStore = useStore
 
-// export const useParams = jest.fn().mockImplementation(() => ({ ref: '123' }))
+export const useParams = jest.fn().mockImplementation(() => ({ ref: '123' }))
 
 // mocks browser event listener adding/removing
 window.matchMedia = jest.fn().mockReturnValue({

studio/tests/pages/projects/LogsPreviewer.test.js

@@ -23,7 +23,7 @@ import userEvent from '@testing-library/user-event'
 import { wait } from '@testing-library/user-event/dist/utils'
 import { logDataFixture } from '../../fixtures'
 import { LogsTableName } from 'components/interfaces/Settings/Logs'
-// import { useParams } from 'hooks'
+import { useParams } from 'hooks'
 
 beforeEach(() => {
   // reset mocks between tests
@@ -233,7 +233,7 @@ test('s= query param will populate the search bar', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, s: 'someSearch' }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
   // should populate search input with the search param
   await screen.findByDisplayValue('someSearch')
@@ -248,7 +248,7 @@ test('te= query param will populate the timestamp to input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, ite: iso }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
@@ -266,7 +266,7 @@ test('ts= query param will populate the timestamp from input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, its: iso }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await waitFor(() => {
@@ -354,7 +354,7 @@ test('bug: nav backwards with params change results in ui changing', async () =>
   const router = defaultRouterMock()
   router.query = { ...router.query, s: 'simple-query' }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   rerender(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
 
   await screen.findByDisplayValue('simple-query')
@@ -446,7 +446,7 @@ describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (ke
       ite: dayjs().toISOString(),
     }
     useRouter.mockReturnValue(router)
-    // useParams.mockReturnValue(router.query)
+    useParams.mockReturnValue(router.query)
     render(<LogsPreviewer projectRef="123" tableName={LogsTableName.EDGE} />)
     await screen.findByText('Log retention') // assert modal title is present
   })

studio/tests/pages/projects/logs-query.test.js

@@ -8,7 +8,7 @@ import { logDataFixture } from '../../fixtures'
 import { clickDropdown } from 'tests/helpers'
 import dayjs from 'dayjs'
 import { useProjectSubscriptionQuery } from 'data/subscriptions/project-subscription-query'
-// import { useParams } from 'hooks'
+import { useParams } from 'hooks'
 
 const defaultRouterMock = () => {
   const router = jest.fn()
@@ -54,7 +54,7 @@ test('q= query param will populate the query input', async () => {
   const router = defaultRouterMock()
   router.query = { ...router.query, type: 'api', q: 'some_query' }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   // should populate editor with the query param
   await waitFor(() => {
@@ -74,7 +74,7 @@ test('ite= and its= query param will populate the datepicker', async () => {
     ite: end.toISOString(),
   }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   // should populate editor with the query param
   await waitFor(() => {
@@ -150,7 +150,7 @@ test('query warnings', async () => {
     ite: dayjs().toISOString(),
   }
   useRouter.mockReturnValue(router)
-  // useParams.mockReturnValue(router.query)
+  useParams.mockReturnValue(router.query)
   render(<LogsExplorerPage />)
   await screen.findByText('1 warning')
 })
@@ -175,7 +175,7 @@ describe.each(['FREE', 'PRO', 'TEAM', 'ENTERPRISE'])('upgrade modal for %s', (ke
       ite: dayjs().toISOString(),
     }
     useRouter.mockReturnValue(router)
-    // useParams.mockReturnValue(router.query)
+    useParams.mockReturnValue(router.query)
     render(<LogsExplorerPage />)
     await screen.findByText(/Log retention/) // assert modal title is present
   })