rsnext/test/development/acceptance-app/component-stack.test.ts
Leah c1c3675fc4
refactor tests for readability (#51051)
You'll probably want to disable whitespace in the diff

## Description

This allows for better editor support by using `describe` or functions called `describe` with the same syntax instead of custom names.

Changes:
- `nextTestSetup` can be used instead of `createNextDescribe` keeping the same behaviour but being called inside a `describe` "block" (not applied everywhere)
- `getSnapshotTestDescribe` replaced with a custom `describe.each`
- `sandbox` helper function for `acceptance`/`acceptance-app` merged into a single shared one
- `outdent` to remove the indent from inline files in tests which helps with consistent snapshots
2023-06-21 19:47:21 +00:00

62 lines
1.5 KiB
TypeScript

/* eslint-env jest */
import { sandbox } from 'development-sandbox'
import { FileRef, nextTestSetup } from 'e2e-utils'
import path from 'path'
import { outdent } from 'outdent'
describe('Component Stack in error overlay', () => {
const { next } = nextTestSetup({
files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
dependencies: {
react: 'latest',
'react-dom': 'latest',
},
skipStart: true,
})
it('should show a component stack on hydration error', async () => {
const { cleanup, session } = await sandbox(
next,
new Map([
[
'app/component.js',
outdent`
'use client'
const isClient = typeof window !== 'undefined'
export default function Component() {
return (
<div>
<p>{isClient ? "client" : "server"}</p>
</div>
);
}
`,
],
[
'app/page.js',
outdent`
import Component from './component'
export default function Mismatch() {
return (
<main>
<Component />
</main>
);
}
`,
],
])
)
await session.waitForAndOpenRuntimeError()
expect(await session.getRedboxComponentStack()).toMatchInlineSnapshot(`
"p
div
Component
main"
`)
await cleanup()
})
})