311eea4c6a
### What & Why emotion-js has its own [jsx transform](https://emotion.sh/docs/typescript#emotionreact) which is being applied when `compiler.emotion` is enabled in `next.config.js`. Thanks to emotion-js team that provided an emotion-js example setup with app router [here](https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319792703), so that we can use it as test example with app router. Based on the setup, we create a test case working with emotion js but failed with error mentioned in #41994 that some client hooks appearing in server components. That is because the emotion-js jsx factory includes some client hooks. ### How For server components, css-in-js is not recommended to apply so we disabled the transform before, the emotion jsx factory is a separate config that should also not be applied in server components. So in this case we still use react jsx factory instead of the emotion-js one for server components then it won't error. The test case can also be used as an example for basic emotion-js use case with app router. Fixes #41994 Closes NEXT-1368
28 lines
731 B
TypeScript
28 lines
731 B
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
import { check } from 'next-test-utils'
|
|
|
|
createNextDescribe(
|
|
'app dir - emotion-js',
|
|
{
|
|
files: __dirname,
|
|
skipDeployment: true,
|
|
dependencies: {
|
|
'@emotion/react': 'latest',
|
|
'@emotion/cache': 'latest',
|
|
},
|
|
},
|
|
({ next }) => {
|
|
it('should render emotion-js css with compiler.emotion option correctly', async () => {
|
|
const browser = await next.browser('/')
|
|
const el = browser.elementByCss('h1')
|
|
expect(await el.text()).toBe('Blue')
|
|
await check(
|
|
async () =>
|
|
await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('h1')).color`
|
|
),
|
|
'rgb(0, 0, 255)'
|
|
)
|
|
})
|
|
}
|
|
)
|