From f39dd8cd468cdb5d461fe9fcd373720dac44008f Mon Sep 17 00:00:00 2001 From: Jiachi Liu Date: Sat, 26 Mar 2022 11:34:39 +0100 Subject: [PATCH] test: clean up legacy tests --- .../react-18/app/components/bar.js | 22 -------- .../react-18/app/components/dynamic-hello.js | 18 ------- .../react-18/app/components/foo.js | 3 -- .../react-18/app/components/hello.js | 37 -------------- .../react-18/app/components/promise-cache.js | 37 -------------- .../react-18/app/components/red.js | 21 -------- .../react-18/app/components/red.tsx | 21 ++++++++ .../react-18/app/components/ts-foo.tsx | 3 -- .../react-18/app/pages/_app.js.txt | 11 ---- test/integration/react-18/app/pages/ssr.js | 8 --- .../react-18/app/pages/suspense/no-preload.js | 22 -------- .../react-18/app/pages/suspense/typing.tsx | 14 ------ .../{styled-jsx.js => styled-jsx.tsx} | 2 + test/integration/react-18/test/basics.js | 12 +---- test/integration/react-18/test/concurrent.js | 50 +------------------ test/integration/react-18/test/index.test.js | 5 -- .../react-18/test/streaming-data.js | 8 +-- .../app/components/bar.client.js | 3 ++ .../app/pages/dynamic-imports.js | 7 ++- .../app/pages/index.server.js | 4 -- .../test/basic.js | 4 +- .../test/rsc.js | 1 - 22 files changed, 42 insertions(+), 271 deletions(-) delete mode 100644 test/integration/react-18/app/components/bar.js delete mode 100644 test/integration/react-18/app/components/dynamic-hello.js delete mode 100644 test/integration/react-18/app/components/foo.js delete mode 100644 test/integration/react-18/app/components/hello.js delete mode 100644 test/integration/react-18/app/components/promise-cache.js delete mode 100644 test/integration/react-18/app/components/red.js create mode 100644 test/integration/react-18/app/components/red.tsx delete mode 100644 test/integration/react-18/app/components/ts-foo.tsx delete mode 100644 test/integration/react-18/app/pages/_app.js.txt delete mode 100644 test/integration/react-18/app/pages/ssr.js delete mode 100644 test/integration/react-18/app/pages/suspense/no-preload.js delete mode 100644 test/integration/react-18/app/pages/suspense/typing.tsx rename test/integration/react-18/app/pages/use-flush-effect/{styled-jsx.js => styled-jsx.tsx} (87%) create mode 100644 test/integration/react-streaming-and-server-components/app/components/bar.client.js diff --git a/test/integration/react-18/app/components/bar.js b/test/integration/react-18/app/components/bar.js deleted file mode 100644 index 20b105c45c99..000000000000 --- a/test/integration/react-18/app/components/bar.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Suspense } from 'react' -import dynamic from 'next/dynamic' -import { createStreamingData } from '../../test/streaming-data' - -const Foo = dynamic(() => import('./foo'), { - suspense: true, -}) - -const Data = createStreamingData('bar') - -export default function Bar() { - return ( -
- - - - - - -
- ) -} diff --git a/test/integration/react-18/app/components/dynamic-hello.js b/test/integration/react-18/app/components/dynamic-hello.js deleted file mode 100644 index 61d0ecaea9b8..000000000000 --- a/test/integration/react-18/app/components/dynamic-hello.js +++ /dev/null @@ -1,18 +0,0 @@ -import { Suspense } from 'react' -import dynamic from 'next/dynamic' - -let ssr -const suspense = false - -const Hello = dynamic(() => import('./hello'), { - ssr, - suspense, -}) - -export default function DynamicHello(props) { - return ( - - - - ) -} diff --git a/test/integration/react-18/app/components/foo.js b/test/integration/react-18/app/components/foo.js deleted file mode 100644 index 3689dc33e306..000000000000 --- a/test/integration/react-18/app/components/foo.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function Foo() { - return 'foo' -} diff --git a/test/integration/react-18/app/components/hello.js b/test/integration/react-18/app/components/hello.js deleted file mode 100644 index 2812405370b7..000000000000 --- a/test/integration/react-18/app/components/hello.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import { useCachedPromise } from './promise-cache' - -export default function Hello({ name, thrown = false }) { - useCachedPromise( - name, - () => new Promise((resolve) => setTimeout(resolve, 200)), - thrown - ) - - const [hydrated, setHydrated] = React.useState(() => false) - React.useEffect(() => { - if (!hydrated) { - setHydrated(true) - } - }, [hydrated]) - - const serverRendered = React.useMemo(() => { - if (typeof window === 'undefined') { - return true - } - const elem = document.getElementById('server-rendered') - if (elem) { - return elem.innerText === 'true' - } - return false - }, []) - - return ( -

- hello {ReactDOM.version} - {serverRendered.toString()} - {hydrated ? {hydrated.toString()} : null} -

- ) -} diff --git a/test/integration/react-18/app/components/promise-cache.js b/test/integration/react-18/app/components/promise-cache.js deleted file mode 100644 index eab490fb9ae9..000000000000 --- a/test/integration/react-18/app/components/promise-cache.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react' - -const PromiseCacheContext = React.createContext(null) - -export const cache = new Map() -export const PromiseCacheProvider = PromiseCacheContext.Provider - -export function useCachedPromise(key, fn, thrown = false) { - const cache = React.useContext(PromiseCacheContext) - - if (!thrown) return undefined - let entry = cache.get(key) - if (!entry) { - entry = { - status: 'PENDING', - value: fn().then( - (value) => { - cache.set(key, { - status: 'RESOLVED', - value, - }) - }, - (err) => { - cache.set(key, { - status: 'REJECTED', - value: err, - }) - } - ), - } - cache.set(key, entry) - } - if (['PENDING', 'REJECTED'].includes(entry.status)) { - throw entry.value - } - return entry.value -} diff --git a/test/integration/react-18/app/components/red.js b/test/integration/react-18/app/components/red.js deleted file mode 100644 index 8f92c5ccc52d..000000000000 --- a/test/integration/react-18/app/components/red.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { useCachedPromise } from './promise-cache' - -export default function Styled({ name }) { - useCachedPromise( - name, - () => new Promise((resolve) => setTimeout(resolve, 1000)), - true - ) - - return ( -
-

This is Red.

- -
- ) -} diff --git a/test/integration/react-18/app/components/red.tsx b/test/integration/react-18/app/components/red.tsx new file mode 100644 index 000000000000..3da9eaccfef4 --- /dev/null +++ b/test/integration/react-18/app/components/red.tsx @@ -0,0 +1,21 @@ +import React, { Suspense } from 'react' +import { createStreamingData } from '../../test/streaming-data' + +const Data = createStreamingData() + +export default function Styled() { + return ( + + +
+

This is Red.

+ +
+ + + ) +} diff --git a/test/integration/react-18/app/components/ts-foo.tsx b/test/integration/react-18/app/components/ts-foo.tsx deleted file mode 100644 index f29172cb4aa5..000000000000 --- a/test/integration/react-18/app/components/ts-foo.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function TsFoo() { - return
ts-foo
-} diff --git a/test/integration/react-18/app/pages/_app.js.txt b/test/integration/react-18/app/pages/_app.js.txt deleted file mode 100644 index 1f136e7e8a8d..000000000000 --- a/test/integration/react-18/app/pages/_app.js.txt +++ /dev/null @@ -1,11 +0,0 @@ -import { PromiseCacheProvider } from '../components/promise-cache' - -function MyApp({ Component, pageProps }) { - return ( - - - - ) -} - -export default MyApp diff --git a/test/integration/react-18/app/pages/ssr.js b/test/integration/react-18/app/pages/ssr.js deleted file mode 100644 index 456cff7cb48e..000000000000 --- a/test/integration/react-18/app/pages/ssr.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function SSR() { - return 'hello' -} - -export function getServerSideProps() { - // Prevent static optimization - return { props: {} } -} diff --git a/test/integration/react-18/app/pages/suspense/no-preload.js b/test/integration/react-18/app/pages/suspense/no-preload.js deleted file mode 100644 index 8ae8c7c599f2..000000000000 --- a/test/integration/react-18/app/pages/suspense/no-preload.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Suspense } from 'react' -import dynamic from 'next/dynamic' - -const Bar = dynamic(() => import('../../components/bar'), { - ssr: false, - suspense: true, - // Explicitly declare loaded modules. - // For suspense cases, they'll be ignored. - // For loadable component cases, they'll be handled - loadableGenerated: { - modules: ['../../components/bar'], - webpack: [require.resolveWeak('../../components/bar')], - }, -}) - -export default function NoPreload() { - return ( - - - - ) -} diff --git a/test/integration/react-18/app/pages/suspense/typing.tsx b/test/integration/react-18/app/pages/suspense/typing.tsx deleted file mode 100644 index 5b5df73d7366..000000000000 --- a/test/integration/react-18/app/pages/suspense/typing.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React, { Suspense } from 'react' -import dynamic from 'next/dynamic' - -const DynamicFoo = dynamic(() => import('../../components/ts-foo'), { - suspense: true, -}) - -export default function Typing() { - return ( - - - - ) -} diff --git a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js b/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx similarity index 87% rename from test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js rename to test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx index 27105d3f9c3a..039f554337c3 100644 --- a/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.js +++ b/test/integration/react-18/app/pages/use-flush-effect/styled-jsx.tsx @@ -1,3 +1,5 @@ +// use tsx to cover typescript usage of next/dynamic + suspense: true + import React from 'react' import dynamic from 'next/dynamic' diff --git a/test/integration/react-18/test/basics.js b/test/integration/react-18/test/basics.js index 49caa0fffbb8..051b6d4d2d5d 100644 --- a/test/integration/react-18/test/basics.js +++ b/test/integration/react-18/test/basics.js @@ -2,7 +2,7 @@ import webdriver from 'next-webdriver' import cheerio from 'cheerio' -import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils' +import { renderViaHTTP } from 'next-test-utils' export default (context) => { it('no warnings for image related link props', async () => { @@ -17,16 +17,6 @@ export default (context) => { expect(await browser.elementById('react-dom-version').text()).toMatch(/18/) }) - it('should render fallback without preloads on server side', async () => { - const html = await renderViaHTTP(context.appPort, '/suspense/no-preload') - const $ = cheerio.load(html) - const nextData = JSON.parse($('#__NEXT_DATA__').text()) - const content = $('#__next').text() - // is suspended - expect(content).toBe('fallback') - expect(nextData.dynamicIds).toBeUndefined() - }) - it('useId() values should match on hydration', async () => { const html = await renderViaHTTP(context.appPort, '/use-id') const $ = cheerio.load(html) diff --git a/test/integration/react-18/test/concurrent.js b/test/integration/react-18/test/concurrent.js index a49bcd4d5e98..92871dbab3b8 100644 --- a/test/integration/react-18/test/concurrent.js +++ b/test/integration/react-18/test/concurrent.js @@ -7,7 +7,7 @@ export default (context, _render) => { async function withBrowser(path, cb) { let browser try { - browser = await webdriver(context.appPort, path, false) + browser = await webdriver(context.appPort, path) await cb(browser) } finally { if (browser) { @@ -16,52 +16,6 @@ export default (context, _render) => { } } - it('should resolve suspense modules on server side if suspense', async () => { - await withBrowser('/suspense/no-preload', async (browser) => { - await check(() => browser.waitForElementByCss('#__next').text(), /barfoo/) - await check( - () => browser.eval('typeof __NEXT_DATA__.dynamicIds'), - /undefined/ - ) - }) - }) - - it('should resolve suspense on server side if not suspended on server', async () => { - await withBrowser('/suspense/no-thrown', async (browser) => { - await check( - () => browser.waitForElementByCss('#server-rendered').text(), - /true/ - ) - await check( - () => browser.eval('typeof __NEXT_DATA__.dynamicIds'), - /undefined/ - ) - }) - }) - - it('should resolve suspense on server side if suspended on server', async () => { - await withBrowser('/suspense/thrown', async (browser) => { - await check( - () => browser.waitForElementByCss('#server-rendered').text(), - /true/ - ) - await check( - () => browser.eval('typeof __NEXT_DATA__.dynamicIds'), - /undefined/ - ) - }) - }) - - it('should hydrate suspenses on client side if suspended on server', async () => { - await withBrowser('/suspense/thrown', async (browser) => { - await check(() => browser.waitForElementByCss('#hydrated').text(), /true/) - await check( - () => browser.eval('typeof __NEXT_DATA__.dynamicIds'), - /undefined/ - ) - }) - }) - it('throws if useFlushEffects is used more than once', async () => { await renderViaHTTP(context.appPort, '/use-flush-effect/multiple-calls') expect(context.stderr).toContain( @@ -85,7 +39,7 @@ export default (context, _render) => { /blue/ ) await check( - () => browser.waitForElementByCss('#__jsx-c74678abd3b78a').text(), + () => browser.waitForElementByCss('#__jsx-8b0811664c4e575e').text(), /red/ ) }) diff --git a/test/integration/react-18/test/index.test.js b/test/integration/react-18/test/index.test.js index a73fe010d53f..168c815bc5b4 100644 --- a/test/integration/react-18/test/index.test.js +++ b/test/integration/react-18/test/index.test.js @@ -22,7 +22,6 @@ import webdriver from 'next-webdriver' const nodeArgs = ['-r', join(__dirname, 'require-hook.js')] const appDir = join(__dirname, '../app') const nextConfig = new File(join(appDir, 'next.config.js')) -const dynamicHello = new File(join(appDir, 'components/dynamic-hello.js')) const invalidPage = new File(join(appDir, 'pages/invalid.js')) describe('Basics', () => { @@ -72,16 +71,12 @@ function runTestsAgainstRuntime(runtime) { invalidPage.write(`export const value = 1`) } nextConfig.replace("// runtime: 'edge'", `runtime: '${runtime}'`) - dynamicHello.replace('suspense = false', `suspense = true`) - // `noSSR` mode will be ignored by suspense - dynamicHello.replace('let ssr', `let ssr = false`) }, afterAll: (env) => { if (env === 'dev') { invalidPage.delete() } nextConfig.restore() - dynamicHello.restore() }, } ) diff --git a/test/integration/react-18/test/streaming-data.js b/test/integration/react-18/test/streaming-data.js index 476170e90cbe..7940347c3949 100644 --- a/test/integration/react-18/test/streaming-data.js +++ b/test/integration/react-18/test/streaming-data.js @@ -1,14 +1,14 @@ -export function createStreamingData(value) { +export function createStreamingData() { let result let promise - function Data() { + function Data({ children, duration = 500 }) { if (result) return result if (!promise) promise = new Promise((res) => { setTimeout(() => { - result = value + result = children res() - }, 500) + }, duration) }) throw promise } diff --git a/test/integration/react-streaming-and-server-components/app/components/bar.client.js b/test/integration/react-streaming-and-server-components/app/components/bar.client.js new file mode 100644 index 000000000000..b58488a9c3b5 --- /dev/null +++ b/test/integration/react-streaming-and-server-components/app/components/bar.client.js @@ -0,0 +1,3 @@ +export default function bar() { + return 'bar.client' +} diff --git a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js b/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js index 60e8bf7fe0c1..2b3c34f65a80 100644 --- a/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js +++ b/test/integration/react-streaming-and-server-components/app/pages/dynamic-imports.js @@ -1,12 +1,17 @@ import { lazy, Suspense } from 'react' +import dynamic from 'next/dynamic' const Foo = lazy(() => import('../components/foo.client')) +const Bar = dynamic(() => import('../components/bar.client'), { + suspense: true, +}) export default function Page() { return (
- + +
) diff --git a/test/integration/react-streaming-and-server-components/app/pages/index.server.js b/test/integration/react-streaming-and-server-components/app/pages/index.server.js index 4bbf05c55236..7ca7e5e30855 100644 --- a/test/integration/react-streaming-and-server-components/app/pages/index.server.js +++ b/test/integration/react-streaming-and-server-components/app/pages/index.server.js @@ -1,4 +1,3 @@ -import Foo from '../components/foo.client' import Nav from '../components/nav.server' const envVar = process.env.ENV_VAR_TEST @@ -11,9 +10,6 @@ export default function Index({ header, router }) {
{'path:' + router.pathname}
{'env:' + envVar}
{'header:' + header}
-
- -