/
index.test.js
146 lines (127 loc) · 4.03 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
/* eslint-env jest */
import { join } from 'path'
import fs from 'fs-extra'
import webdriver from 'next-webdriver'
import {
File,
findPort,
killApp,
launchApp,
nextBuild,
nextStart,
fetchViaHTTP,
renderViaHTTP,
} from 'next-test-utils'
import dynamic from './dynamic'
jest.setTimeout(1000 * 60 * 5)
// overrides react and react-dom to v18
const nodeArgs = ['-r', join(__dirname, 'require-hook.js')]
const appDir = join(__dirname, '../prerelease')
const nextConfig = new File(join(appDir, 'next.config.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)
})
})
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('React 18 basics', () => {
const context = {}
beforeAll(async () => {
await fs.remove(join(appDir, '.next'))
await nextBuild(appDir, [appDir], { nodeArgs })
context.appPort = await findPort()
context.app = await nextStart(appDir, context.appPort, { nodeArgs })
})
afterAll(async () => {
await killApp(context.app)
})
it('hydrates correctly for normal page', async () => {
const browser = await webdriver(context.appPort, '/')
expect(await browser.eval('window.didHydrate')).toBe(true)
expect(await browser.elementById('react-dom-version').text()).toMatch(/18/)
})
it('SSG works for suspense', async () => {
const res1 = await fetchViaHTTP(context.appPort, '/suspense/thrown')
const res2 = await fetchViaHTTP(context.appPort, '/suspense/no-thrown')
expect(res1.status).toBe(200)
expect(res2.status).toBe(200)
})
})
describe('Dynamic import', () => {
const context = {}
beforeEach(async () => {
context.appPort = await findPort()
context.server = await launchApp(appDir, context.appPort, { nodeArgs })
})
afterEach(async () => {
await killApp(context.server)
})
dynamic(context, (p, q) => renderViaHTTP(context.appPort, p, q))
})