mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi Liu
4a6b511ca0
### What Apply the react aliases for app dir also to the files with `pagesExtension` ### Why In the page bundle of mdx page: In RSC layer react is referencing to the insatlled react 18.2.0 's `jsx-runtime` to create each JSX element. The react 18.2 JSX runtime access `propTypes` of the component type and then it crashes 💥 In RSC layer it should use the built-in react canary's `jsx-runtime`. The reason that it didn't use the built-in one is we're using customized `pageExtension` `["mdx"]` for mdx, where we didn't apply all these rules for the files with `pageExtension`, but only the js and ts files by default. For mdx specifically, we cannot only applied to `(page|layout|route).[page extension]` cause every mdx file needs to have proper resolution. Since this doesn't break transform, it's safe to apply for all files with page extension. Fixes #58888 Closes NEXT-3187
111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
for (const type of [
|
|
'with-mdx-rs',
|
|
// only mdx-rs should work with turbopack
|
|
...(process.env.TURBOPACK ? [] : ['without-mdx-rs']),
|
|
]) {
|
|
createNextDescribe(
|
|
`mdx ${type}`,
|
|
{
|
|
files: __dirname,
|
|
dependencies: {
|
|
'@next/mdx': 'canary',
|
|
'@mdx-js/loader': '^2.2.1',
|
|
'@mdx-js/react': '^2.2.1',
|
|
},
|
|
env: {
|
|
WITH_MDX_RS: type === 'with-mdx-rs' ? 'true' : 'false',
|
|
},
|
|
},
|
|
({ next }) => {
|
|
describe('app directory', () => {
|
|
it('should work in initial html', async () => {
|
|
const $ = await next.render$('/')
|
|
expect($('h1').text()).toBe('Hello World')
|
|
expect($('p').text()).toBe('This is MDX!')
|
|
})
|
|
|
|
it('should work using browser', async () => {
|
|
const browser = await next.browser('/')
|
|
expect(await browser.elementByCss('h1').text()).toBe('Hello World')
|
|
expect(await browser.elementByCss('p').text()).toBe('This is MDX!')
|
|
})
|
|
|
|
it('should work in initial html with mdx import', async () => {
|
|
const $ = await next.render$('/import')
|
|
expect($('h1').text()).toBe('This is a title')
|
|
expect($('p').text()).toBe('This is a paragraph')
|
|
})
|
|
|
|
it('should work using browser with mdx import', async () => {
|
|
const browser = await next.browser('/import')
|
|
expect(await browser.elementByCss('h1').text()).toBe(
|
|
'This is a title'
|
|
)
|
|
expect(await browser.elementByCss('p').text()).toBe(
|
|
'This is a paragraph'
|
|
)
|
|
})
|
|
|
|
it('should allow overriding components', async () => {
|
|
const browser = await next.browser('/')
|
|
expect(await browser.elementByCss('h1').getComputedCss('color')).toBe(
|
|
'rgb(255, 0, 0)'
|
|
)
|
|
})
|
|
|
|
it('should allow importing client components', async () => {
|
|
const $ = await next.render$('/')
|
|
expect($('h2').text()).toBe('This is a client component')
|
|
})
|
|
|
|
it('should work with next/image', async () => {
|
|
const $ = await next.render$('/image')
|
|
expect($('img').attr('src')).toBe(
|
|
'/_next/image?url=%2Ftest.jpg&w=384&q=75'
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('pages directory', () => {
|
|
it('should work in initial html', async () => {
|
|
const $ = await next.render$('/pages')
|
|
expect($('h1').text()).toBe('Hello World')
|
|
expect($('p').text()).toBe('This is MDX!')
|
|
})
|
|
|
|
// Recommended for tests that need a full browser
|
|
it('should work using browser', async () => {
|
|
const browser = await next.browser('/pages')
|
|
expect(await browser.elementByCss('h1').text()).toBe('Hello World')
|
|
expect(await browser.elementByCss('p').text()).toBe('This is MDX!')
|
|
})
|
|
|
|
it('should work in initial html with mdx import', async () => {
|
|
const $ = await next.render$('/pages/import')
|
|
expect($('h1').text()).toBe('This is a title')
|
|
expect($('p').text()).toBe('This is a paragraph')
|
|
})
|
|
|
|
it('should work using browser with mdx import', async () => {
|
|
const browser = await next.browser('/pages/import')
|
|
expect(await browser.elementByCss('h1').text()).toBe(
|
|
'This is a title'
|
|
)
|
|
expect(await browser.elementByCss('p').text()).toBe(
|
|
'This is a paragraph'
|
|
)
|
|
})
|
|
|
|
it('should allow overriding components', async () => {
|
|
const browser = await next.browser('/pages')
|
|
expect(await browser.elementByCss('h1').getComputedCss('color')).toBe(
|
|
'rgb(255, 0, 0)'
|
|
)
|
|
})
|
|
})
|
|
}
|
|
)
|
|
}
|