-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
/
ssr-react.spec.ts
64 lines (54 loc) · 1.85 KB
/
ssr-react.spec.ts
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
import fetch from 'node-fetch'
import { port } from './serve'
import { browserLogs, editFile, page, untilUpdated } from '~utils'
const url = `http://localhost:${port}`
test('/env', async () => {
await page.goto(url + '/env')
expect(await page.textContent('h1')).toMatch('default message here')
// raw http request
const envHtml = await (await fetch(url + '/env')).text()
expect(envHtml).toMatch('API_KEY_qwertyuiop')
})
test('/about', async () => {
await page.goto(url + '/about')
expect(await page.textContent('h1')).toMatch('About')
// should not have hydration mismatch
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('Expected server HTML')
})
// raw http request
const aboutHtml = await (await fetch(url + '/about')).text()
expect(aboutHtml).toMatch('About')
})
test('/', async () => {
await page.goto(url)
expect(await page.textContent('h1')).toMatch('Home')
// should not have hydration mismatch
browserLogs.forEach((msg) => {
expect(msg).not.toMatch('Expected server HTML')
})
// raw http request
const html = await (await fetch(url)).text()
expect(html).toMatch('Home')
})
test('hmr', async () => {
editFile('src/pages/Home.jsx', (code) =>
code.replace('<h1>Home', '<h1>changed')
)
await untilUpdated(() => page.textContent('h1'), 'changed')
})
test('client navigation', async () => {
await untilUpdated(() => page.textContent('a[href="/about"]'), 'About')
await page.click('a[href="/about"]')
await untilUpdated(() => page.textContent('h1'), 'About')
editFile('src/pages/About.jsx', (code) =>
code.replace('<h1>About', '<h1>changed')
)
await untilUpdated(() => page.textContent('h1'), 'changed')
})
test(`circular dependencies modules doesn't throw`, async () => {
await page.goto(url)
expect(await page.textContent('.circ-dep-init')).toMatch(
'circ-dep-init-a circ-dep-init-b'
)
})