rsnext/test/e2e/app-dir/params-hooks-compat/index.test.ts
Jiachi Liu ff3668499a
Make useSearchParams and useParams compatible between app and pages router (#55280)
### `useSearchParams`

server router's query includes both search params and path params, this PR eliminate the path params from `useSearchParams` to make it aligned between app router and pages router

### `useParams`

For pages, we extract the params keys with `getRouteRegex`, and pick them out from `router.query`

Fixes #54242 
Closes NEXT-1536
2023-09-18 12:42:20 +00:00

37 lines
1.3 KiB
TypeScript

import { createNextDescribe } from 'e2e-utils'
createNextDescribe(
'app-dir - params hooks compat',
{
files: __dirname,
},
({ next }) => {
it('should only access search params with useSearchParams', async () => {
const browserApp = await next.browser('/app/foobar?q=app')
const appSearchparamsJSON = JSON.parse(
await browserApp.elementByCss('#use-search-params').text()
)
const browserPages = await next.browser('/pages/foobar?q=pages')
const pagesSearchparamsJSON = JSON.parse(
await browserPages.elementByCss('#use-search-params').text()
)
expect(appSearchparamsJSON).toEqual({ q: 'app' })
expect(pagesSearchparamsJSON).toEqual({ q: 'pages' })
})
it('should only access path params with useParams', async () => {
const browserApp = await next.browser('/app/foobar?a=app')
const appParamsJSON = JSON.parse(
await browserApp.elementByCss('#use-params').text()
)
const browserPages = await next.browser('/pages/foobar?a=pages')
const pagesParamsJSON = JSON.parse(
await browserPages.elementByCss('#use-params').text()
)
expect(appParamsJSON).toEqual({ slug: 'foobar' })
expect(pagesParamsJSON).toEqual({ slug: 'foobar' })
})
}
)