forked from vercel/next.js
/
index.test.js
199 lines (175 loc) · 5.53 KB
/
index.test.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
/* eslint-env jest */
import { join } from 'path'
import fs from 'fs-extra'
import {
File,
findPort,
killApp,
launchApp,
nextBuild,
nextStart,
renderViaHTTP,
} from 'next-test-utils'
import blocking from './blocking'
import concurrent from './concurrent'
import basics from './basics'
jest.setTimeout(1000 * 60 * 5)
// overrides react and react-dom to v18
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 unwrappedPage = new File(join(appDir, 'pages/suspense/unwrapped.js'))
const UNSUPPORTED_PRERELEASE =
"You are using an unsupported prerelease of 'react-dom'"
const USING_CREATE_ROOT = 'Using the createRoot API for React'
async function getBuildOutput(dir) {
const { stdout, stderr } = await nextBuild(dir, [], {
stdout: true,
stderr: true,
nodeArgs,
})
return stdout + stderr
}
async function getDevOutput(dir) {
const port = await findPort()
let stdout = ''
let stderr = ''
let instance = await launchApp(dir, port, {
stdout: true,
stderr: true,
onStdout(msg) {
stdout += msg
},
onStderr(msg) {
stderr += msg
},
nodeArgs,
})
await killApp(instance)
return stdout + stderr
}
describe('React 18 Support', () => {
describe('no warns with stable supported version of react-dom', () => {
beforeAll(async () => {
await fs.remove(join(appDir, 'node_modules'))
nextConfig.replace('reactRoot: true', '// reactRoot: true')
})
afterAll(() => {
nextConfig.replace('// reactRoot: true', 'reactRoot: true')
})
test('supported version of react in dev', async () => {
const output = await getDevOutput(appDir)
expect(output).not.toMatch(USING_CREATE_ROOT)
expect(output).not.toMatch(UNSUPPORTED_PRERELEASE)
})
test('supported version of react in build', async () => {
const output = await getBuildOutput(appDir)
expect(output).not.toMatch(USING_CREATE_ROOT)
expect(output).not.toMatch(UNSUPPORTED_PRERELEASE)
})
test('suspense is not allowed in blocking rendering mode (prod)', async () => {
const { stderr, code } = await nextBuild(appDir, [], {
nodeArgs,
stderr: true,
})
expect(code).toBe(1)
expect(stderr).toContain(
'Invalid suspense option usage in next/dynamic. Read more: https://nextjs.org/docs/messages/invalid-dynamic-suspense'
)
})
})
describe('warns with stable supported version of react-dom', () => {
beforeAll(async () => {
const reactDomPkgPath = join(
appDir,
'node_modules/react-dom/package.json'
)
await fs.outputJson(reactDomPkgPath, {
name: 'react-dom',
version: '18.0.0-alpha-c76e4dbbc-20210722',
})
})
afterAll(async () => await fs.remove(join(appDir, 'node_modules')))
test('prerelease version of react in dev', async () => {
const output = await getDevOutput(appDir)
expect(output).toMatch(USING_CREATE_ROOT)
expect(output).toMatch(UNSUPPORTED_PRERELEASE)
})
test('prerelease version of react in build', async () => {
const output = await getBuildOutput(appDir)
expect(output).toMatch(USING_CREATE_ROOT)
expect(output).toMatch(UNSUPPORTED_PRERELEASE)
})
})
})
describe('Basics', () => {
runTests('default setting with react 18', (context) => basics(context))
it('suspense is not allowed in blocking rendering mode (dev)', async () => {
// set dynamic.suspense = true but not wrapping with <Suspense>
unwrappedPage.replace('wrapped = true', 'wrapped = false')
const appPort = await findPort()
const app = await launchApp(appDir, appPort, { nodeArgs })
const html = await renderViaHTTP(appPort, '/suspense/unwrapped')
unwrappedPage.restore()
await killApp(app)
expect(html).toContain(
'A React component suspended while rendering, but no fallback UI was specified'
)
})
})
describe('Blocking mode', () => {
beforeAll(() => {
dynamicHello.replace('suspense = false', `suspense = true`)
})
afterAll(() => {
dynamicHello.restore()
})
runTests('concurrentFeatures is disabled', (context) =>
blocking(context, (p, q) => renderViaHTTP(context.appPort, p, q))
)
})
describe('Concurrent mode', () => {
beforeAll(async () => {
nextConfig.replace(
'// concurrentFeatures: true',
'concurrentFeatures: true'
)
dynamicHello.replace('suspense = false', `suspense = true`)
// `noSSR` mode will be ignored by suspense
dynamicHello.replace('let ssr', `let ssr = false`)
})
afterAll(async () => {
nextConfig.restore()
dynamicHello.restore()
})
runTests('concurrentFeatures is enabled', (context) =>
concurrent(context, (p, q) => renderViaHTTP(context.appPort, p, q))
)
})
function runTest(mode, name, fn) {
const context = { appDir }
describe(`${name} (${mode})`, () => {
beforeAll(async () => {
context.appPort = await findPort()
if (mode === 'dev') {
context.server = await launchApp(context.appDir, context.appPort, {
nodeArgs,
})
} else {
await nextBuild(context.appDir, [], { nodeArgs })
context.server = await nextStart(context.appDir, context.appPort, {
nodeArgs,
})
}
})
afterAll(async () => {
await killApp(context.server)
})
fn(context)
})
}
function runTests(name, fn) {
runTest('dev', name, fn)
runTest('prod', name, fn)
}