mirror of
https://github.com/vercel/next.js.git
synced 2026-09-20 02:25:18 +08:00
Sebastian "Sebbie" Silbermann
6ba71046b0
Node.js ships with a built-in `fetch` now so `node-fetch` is no longer necessary. Mostly motivated by tracing Node.js deprecation warnings which originated from `node-fetch` by calling the deprecated `url.parse`. Call sites keep working through a compatibility type on `fetchViaHTTP` that translates node-fetch-only options: Instead of `agent` we pass to `http(s)` directly, `timeout` becomes `AbortSignal.timeout`, and Node.js readable streams are accepted as bodies with `duplex: 'half'` set automatically. The `abort-controller` polyfill is dropped since its signal type predates the current AbortSignal and undici would not honor it. `node-fetch` stays installed because `scripts/generate-release-log.mjs`, `scripts/reset-project.mjs`, and `scripts/update-google-fonts.js` still import it (follow-up material). Fixture apps will be migrated separately.
100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
|
|
async function resolveStreamResponse(response: any, onData?: any) {
|
|
let result = ''
|
|
onData = onData || (() => {})
|
|
|
|
const decoder = new TextDecoder()
|
|
for await (const chunk of response.body) {
|
|
const text = decoder.decode(chunk, { stream: true })
|
|
result += text
|
|
onData(text, result)
|
|
}
|
|
result += decoder.decode()
|
|
return result
|
|
}
|
|
|
|
describe('use-server-inserted-html', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies: {
|
|
// TODO: Temporarily pinned due to https://github.com/styled-components/styled-components/issues/5667
|
|
// which is breaking deployment tests
|
|
'styled-components': '6.3.9',
|
|
'server-only': 'latest',
|
|
},
|
|
})
|
|
|
|
it('should render initial styles of css-in-js in nodejs SSR correctly', async () => {
|
|
const $ = await next.render$('/css-in-js')
|
|
const head = $('head').html()
|
|
|
|
// from styled-jsx
|
|
|
|
expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
|
|
expect(head).toMatch(/{color:(\s*)(?:hotpink|#ff69b4);?}/) // styled-jsx/css
|
|
|
|
// from styled-components
|
|
expect(head).toMatch(/{color:(\s*)(?:blue|#00f);?}/)
|
|
})
|
|
|
|
it('should render initial styles of css-in-js in edge SSR correctly', async () => {
|
|
const $ = await next.render$('/css-in-js/edge')
|
|
const head = $('head').html()
|
|
|
|
// from styled-jsx
|
|
expect(head).toMatch(/{color:(\s*)purple;?}/) // styled-jsx/style
|
|
expect(head).toMatch(/{color:(\s*)(?:hotpink|#ff69b4);?}/) // styled-jsx/css
|
|
|
|
// from styled-components
|
|
expect(head).toMatch(/{color:(\s*)(?:blue|#00f);?}/)
|
|
})
|
|
|
|
it('should render css-in-js suspense boundary correctly', async () => {
|
|
await next.fetch('/css-in-js/suspense').then(async (response) => {
|
|
const results = []
|
|
|
|
await resolveStreamResponse(response, (chunk: string) => {
|
|
const isSuspenseyDataResolved =
|
|
/<style[^<>]*>(\s)*.+{padding:2px;(\s)*color:orange;}/.test(chunk)
|
|
if (isSuspenseyDataResolved) results.push('data')
|
|
|
|
// check if rsc refresh script for suspense show up, the test content could change with react version
|
|
const hasRCScript = /\$RC=function/.test(chunk)
|
|
if (hasRCScript) results.push('refresh-script')
|
|
|
|
const isFallbackResolved = chunk.includes('$test-fallback-sentinel')
|
|
if (isFallbackResolved) results.push('fallback')
|
|
})
|
|
|
|
expect(results).toEqual(['fallback', 'data', 'refresh-script'])
|
|
})
|
|
// // TODO-APP: fix streaming/suspense within browser for test suite
|
|
// const browser = await next.browser( '/css-in-js', { waitHydration: false })
|
|
// const footer = await browser.elementByCss('#footer')
|
|
// expect(await footer.text()).toBe('wait for fallback')
|
|
// expect(
|
|
// await browser.eval(
|
|
// `window.getComputedStyle(document.querySelector('#footer')).borderColor`
|
|
// )
|
|
// ).toBe('rgb(255, 165, 0)')
|
|
// // Suspense is not rendered yet
|
|
// expect(
|
|
// await browser.eval(
|
|
// `document.querySelector('#footer-inner')`
|
|
// )
|
|
// ).toBe('null')
|
|
|
|
// // Wait for suspense boundary
|
|
// await check(
|
|
// () => browser.elementByCss('#footer').text(),
|
|
// 'wait for footer'
|
|
// )
|
|
// expect(
|
|
// await browser.eval(
|
|
// `window.getComputedStyle(document.querySelector('#footer-inner')).color`
|
|
// )
|
|
// ).toBe('rgb(255, 165, 0)')
|
|
})
|
|
})
|