-
Notifications
You must be signed in to change notification settings - Fork 26.1k
/
dynamic.js
85 lines (75 loc) · 2.52 KB
/
dynamic.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/* eslint-env jest */
import { join } from 'path'
import webdriver from 'next-webdriver'
import cheerio from 'cheerio'
import { check } from 'next-test-utils'
import { File } from 'next-test-utils'
const appDir = join(__dirname, '../prerelease')
const page = new File(join(appDir, 'components/dynamic-suspense.js'))
function writeDynamicTestComponent({ ssr, suspense = false }) {
const content = `import { Suspense } from 'react'
import dynamic from 'next/dynamic'
const Hello = dynamic(() => import('./hello'), {
${typeof ssr !== 'undefined' ? `ssr: ${ssr},` : ''}
unstable_suspense: ${suspense},
})
export default function SuspenseNoSSR({ thrown }) {
return (
<Suspense fallback={'loading'}>
<Hello thrown={thrown} />
</Suspense>
)
}`
page.write(content)
}
export default (context, render) => {
async function get$(path, query) {
const html = await render(path, query)
return cheerio.load(html)
}
describe('suspense:true option', () => {
beforeAll(() => writeDynamicTestComponent({ suspense: true }))
afterAll(() => page.restore())
describe('promise is thrown on server side', () => {
// let `ssr` option be auto overridden
it('should render the fallback on server side', async () => {
const $ = await get$('/suspense/thrown')
const html = $('body').html()
expect(html).toContain('loading')
expect(
JSON.parse($('#__NEXT_DATA__').text()).dynamicIds
).toBeUndefined()
})
it('should hydrate suspenses on client side', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/suspense/thrown')
await check(() => browser.elementByCss('body').text(), /hello/)
} finally {
if (browser) {
await browser.close()
}
}
})
})
describe('promise is not thrown on server side', () => {
// TODO: add case after streaming mode is supported
it('should render fallback on server side', async () => {
const $ = await get$('/suspense/no-thrown')
const text = $('#__next').text()
expect(text).toContain('loading')
})
it('should hydrate on client side', async () => {
let browser
try {
browser = await webdriver(context.appPort, '/suspense/no-thrown')
await check(() => browser.elementByCss('body').text(), /hello 18/)
} finally {
if (browser) {
await browser.close()
}
}
})
})
})
}