594f3d1fc0
### What & Why
Previously when rendering the root `/_not-found` in production, we'll always override the parallel routes component children with not-found component, this will break the navigation in build mode from root 404 `/_not-found` path.
### How
The new solution is to change the root `/_not-found` rendering strategy. Previously the loader tree of `/_not-found` look like this
```js
['',
{
children: ['not-found', {}, {}]
},
{ layout: ..., 'not-found': ...}
]
```
it's not a pretty valid tree, which could lead to problems during rendering.
New solution is to change the children to render a page, but the page content is `not-found.js` component. The new tree of root not-found will look like
```js
['',
{
children: ['__PAGE__', {}, {
page: ... // same as root 'not-found'
}]
},
{ layout: ..., 'not-found': ...}
]
```
This change could fix the navigation on the root not-found page.
Fixes #52264
136 lines
3.5 KiB
TypeScript
136 lines
3.5 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
export function runTest({ next }) {
|
|
it('should allow navigation on not-found', async () => {
|
|
const browser = await next.browser('/trigger-404')
|
|
expect(await browser.elementByCss('#not-found-component').text()).toBe(
|
|
'Not Found!'
|
|
)
|
|
|
|
expect(
|
|
await browser
|
|
.elementByCss('#to-result')
|
|
.click()
|
|
.waitForElementByCss('#result-page')
|
|
.text()
|
|
).toBe('Result Page!')
|
|
})
|
|
|
|
it('should allow navigation on error', async () => {
|
|
const browser = await next.browser('/trigger-error')
|
|
expect(await browser.elementByCss('#error-component').text()).toBe(
|
|
'Error Happened!'
|
|
)
|
|
|
|
expect(
|
|
await browser
|
|
.elementByCss('#to-result')
|
|
.click()
|
|
.waitForElementByCss('#result-page')
|
|
.text()
|
|
).toBe('Result Page!')
|
|
})
|
|
|
|
it('should allow navigation to other routes on route that was initially not-found', async () => {
|
|
// Intentionally non-existent route.
|
|
const browser = await next.browser('/testabc')
|
|
expect(await browser.elementByCss('#not-found-component').text()).toBe(
|
|
'Not Found!'
|
|
)
|
|
|
|
expect(
|
|
await browser
|
|
.elementByCss('#to-result')
|
|
.click()
|
|
.waitForElementByCss('#result-page')
|
|
.text()
|
|
).toBe('Result Page!')
|
|
})
|
|
|
|
it('should allow navigation back to route that was initially not-found', async () => {
|
|
// Intentionally non-existent route.
|
|
const browser = await next.browser('/testabc')
|
|
expect(await browser.elementByCss('#not-found-component').text()).toBe(
|
|
'Not Found!'
|
|
)
|
|
|
|
await browser
|
|
.elementByCss('#to-result')
|
|
.click()
|
|
.waitForElementByCss('#result-page')
|
|
.back()
|
|
.waitForElementByCss('#not-found-component')
|
|
})
|
|
|
|
it('should allow navigating to a page calling notfound', async () => {
|
|
const browser = await next.browser('/')
|
|
|
|
await browser
|
|
.elementByCss('#trigger-404-link')
|
|
.click()
|
|
.waitForElementByCss('#not-found-component')
|
|
|
|
expect(await browser.elementByCss('#not-found-component').text()).toBe(
|
|
'Not Found!'
|
|
)
|
|
|
|
await browser.back().waitForElementByCss('#homepage')
|
|
|
|
expect(await browser.elementByCss('#homepage').text()).toBe('Home')
|
|
})
|
|
|
|
it('should allow navigating to a non-existent page', async () => {
|
|
const browser = await next.browser('/')
|
|
|
|
await browser
|
|
.elementByCss('#non-existent-link')
|
|
.click()
|
|
.waitForElementByCss('#not-found-component')
|
|
|
|
expect(await browser.elementByCss('#not-found-component').text()).toBe(
|
|
'Not Found!'
|
|
)
|
|
|
|
await browser.back().waitForElementByCss('#homepage')
|
|
|
|
expect(await browser.elementByCss('#homepage').text()).toBe('Home')
|
|
})
|
|
|
|
it('should be able to navigate to other page from root not-found page', async () => {
|
|
const browser = await next.browser('/')
|
|
|
|
await browser
|
|
.elementByCss('#go-to-404')
|
|
.click()
|
|
.waitForElementByCss('#not-found-component')
|
|
|
|
await browser
|
|
.elementByCss('#go-to-dynamic')
|
|
.click()
|
|
.waitForElementByCss('#dynamic')
|
|
|
|
expect(await browser.elementByCss('#dynamic').text()).toBe(
|
|
'Dynamic page: foo'
|
|
)
|
|
|
|
await browser
|
|
.elementByCss('#go-to-dynamic-404')
|
|
.click()
|
|
.waitForElementByCss('#not-found-component')
|
|
|
|
await browser
|
|
.elementByCss('#go-to-index')
|
|
.click()
|
|
.waitForElementByCss('#homepage')
|
|
})
|
|
}
|
|
|
|
createNextDescribe(
|
|
'app dir - not found navigation',
|
|
{
|
|
files: __dirname,
|
|
},
|
|
({ next }) => {
|
|
runTest({ next })
|
|
}
|
|
)
|