/
dynamic.js
109 lines (96 loc) · 3.22 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* 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 writeComponent({ ssr = false, suspense = false }) {
const content = `import { Suspense } from 'react'
import dynamic from 'next/dynamic'
const Hello = dynamic(() => import('./hello'), {
ssr: ${ssr},
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', () => {
describe('promise is thrown on server side', () => {
// let `ssr` option be auto overridden
beforeAll(() => writeComponent({ suspense: true }))
afterAll(() => page.restore())
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__').html()).dynamicIds).toContain(
'./components/hello.js'
)
})
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', () => {
afterAll(() => page.restore())
it('should render fallback on server side', async () => {
const $ = await get$('/suspense/no-thrown')
const text = $('#__next').text()
expect(text).toBe('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()
}
}
})
})
})
describe('suspense:false option', () => {
beforeAll(() => writeComponent({ suspense: false, ssr: false }))
afterAll(() => page.restore())
it('should render nothing on server side', async () => {
const $ = await get$('/suspense/thrown')
const text = $('#__next').text()
expect(text).toBe('')
expect(JSON.parse($('#__NEXT_DATA__').html()).dynamicIds).toBeUndefined()
})
it('should hydrate suspenses on client side with ssr disabled', 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()
}
}
})
})
}