Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ensure adding _app/_document HMRs correctly (#28279)
This is a follow-up to #28227 to ensure `_app` and `_document` HMR correctly when you start the dev server and then add `_app` and `_document`. ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md` x-ref: #27888
- Loading branch information
Showing
10 changed files
with
174 additions
and
59 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default function Page() { | ||
| return <p>index page</p> | ||
| } |
110 changes: 110 additions & 0 deletions
110
test/integration/app-document-add-hmr/test/index.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| /* eslint-env jest */ | ||
|
|
||
| import fs from 'fs-extra' | ||
| import { join } from 'path' | ||
| import webdriver from 'next-webdriver' | ||
| import { killApp, findPort, launchApp, check } from 'next-test-utils' | ||
|
|
||
| jest.setTimeout(1000 * 60 * 2) | ||
|
|
||
| const appDir = join(__dirname, '../') | ||
| const appPage = join(appDir, 'pages/_app.js') | ||
| const indexPage = join(appDir, 'pages/index.js') | ||
| const documentPage = join(appDir, 'pages/_document.js') | ||
|
|
||
| let appPort | ||
| let app | ||
|
|
||
| describe('_app/_document add HMR', () => { | ||
| beforeAll(async () => { | ||
| appPort = await findPort() | ||
| app = await launchApp(appDir, appPort) | ||
| }) | ||
| afterAll(() => killApp(app)) | ||
|
|
||
| it('should HMR when _app is added', async () => { | ||
| let indexContent = await fs.readFile(indexPage) | ||
| try { | ||
| const browser = await webdriver(appPort, '/') | ||
|
|
||
| const html = await browser.eval('document.documentElement.innerHTML') | ||
| expect(html).not.toContain('custom _app') | ||
| expect(html).toContain('index page') | ||
|
|
||
| await fs.writeFile( | ||
| appPage, | ||
| ` | ||
| export default function MyApp({ Component, pageProps }) { | ||
| return ( | ||
| <> | ||
| <p>custom _app</p> | ||
| <Component {...pageProps} /> | ||
| </> | ||
| ) | ||
| } | ||
| ` | ||
| ) | ||
|
|
||
| await check(async () => { | ||
| const html = await browser.eval('document.documentElement.innerHTML') | ||
| return html.includes('custom _app') && html.includes('index page') | ||
| ? 'success' | ||
| : html | ||
| }, 'success') | ||
| } finally { | ||
| await fs.writeFile(indexPage, indexContent) | ||
| await fs.remove(appPage) | ||
| } | ||
| }) | ||
|
|
||
| it('should HMR when _document is added', async () => { | ||
| let indexContent = await fs.readFile(indexPage) | ||
| try { | ||
| const browser = await webdriver(appPort, '/') | ||
|
|
||
| const html = await browser.eval('document.documentElement.innerHTML') | ||
| expect(html).not.toContain('custom _document') | ||
| expect(html).toContain('index page') | ||
|
|
||
| await fs.writeFile( | ||
| documentPage, | ||
| ` | ||
| import Document, { Html, Head, Main, NextScript } from 'next/document' | ||
| class MyDocument extends Document { | ||
| static async getInitialProps(ctx) { | ||
| const initialProps = await Document.getInitialProps(ctx) | ||
| return { ...initialProps } | ||
| } | ||
| render() { | ||
| return ( | ||
| <Html> | ||
| <Head /> | ||
| <body> | ||
| <p>custom _document</p> | ||
| <Main /> | ||
| <NextScript /> | ||
| </body> | ||
| </Html> | ||
| ) | ||
| } | ||
| } | ||
| export default MyDocument | ||
| ` | ||
| ) | ||
|
|
||
| await check(async () => { | ||
| const html = await browser.eval('document.documentElement.innerHTML') | ||
| return html.includes('custom _document') && html.includes('index page') | ||
| ? 'success' | ||
| : html | ||
| }, 'success') | ||
| } finally { | ||
| await fs.writeFile(indexPage, indexContent) | ||
| await fs.remove(documentPage) | ||
| } | ||
| }) | ||
| }) |