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

package.json

@@ -169,6 +169,7 @@
     "npm-run-all": "4.1.5",
     "nprogress": "0.2.0",
     "open": "9.0.0",
+    "outdent": "0.8.0",
     "pixrem": "5.0.0",
     "playwright-chromium": "1.28.1",
     "plop": "3.0.5",

test/development/acceptance-app/ReactRefresh.test.ts

@@ -1,29 +1,24 @@
 /* eslint-env jest */
-import { sandbox } from './helpers'
-import { createNext, FileRef } from 'e2e-utils'
-import { NextInstance } from 'test/lib/next-modes/base'
+import { sandbox } from 'development-sandbox'
+import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
+import { outdent } from 'outdent'
 
 describe('ReactRefresh app', () => {
-  let next: NextInstance
-
-  beforeAll(async () => {
-    next = await createNext({
-      files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
-      dependencies: {
-        react: 'latest',
-        'react-dom': 'latest',
-      },
-      skipStart: true,
-    })
+  const { next } = nextTestSetup({
+    files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
+    dependencies: {
+      react: 'latest',
+      'react-dom': 'latest',
+    },
+    skipStart: true,
   })
-  afterAll(() => next.destroy())
 
   test('can edit a component without losing state', async () => {
     const { session, cleanup } = await sandbox(next)
     await session.patch(
       'index.js',
-      `
+      outdent`
         import { useCallback, useState } from 'react'
         export default function Index() {
           const [count, setCount] = useState(0)
@@ -43,7 +38,7 @@ describe('ReactRefresh app', () => {
     ).toBe('1')
     await session.patch(
       'index.js',
-      `
+      outdent`
         import { useCallback, useState } from 'react'
         export default function Index() {
           const [count, setCount] = useState(0)
@@ -72,7 +67,7 @@ describe('ReactRefresh app', () => {
 
     await session.write(
       'NudgeOverview.js',
-      `
+      outdent`
         import * as React from 'react';
 
         import { foo } from './routes';
@@ -88,7 +83,7 @@ describe('ReactRefresh app', () => {
 
     await session.write(
       'SurveyOverview.js',
-      `
+      outdent`
         const SurveyOverview = () => {
           return 100;
         };
@@ -99,7 +94,7 @@ describe('ReactRefresh app', () => {
 
     await session.write(
       'Milestones.js',
-      `
+      outdent`
         import React from 'react';
 
         import { fragment } from './DashboardPage';
@@ -115,7 +110,7 @@ describe('ReactRefresh app', () => {
 
     await session.write(
       'DashboardPage.js',
-      `
+      outdent`
         import React from 'react';
 
         import Milestones from './Milestones';
@@ -140,7 +135,7 @@ describe('ReactRefresh app', () => {
 
     await session.write(
       'routes.js',
-      `
+      outdent`
         import DashboardPage from './DashboardPage';
 
         export const foo = {};
@@ -154,7 +149,7 @@ describe('ReactRefresh app', () => {
 
     await session.patch(
       'index.js',
-      `
+      outdent`
         import * as React from 'react';
 
         import DashboardPage from './routes';
@@ -173,7 +168,7 @@ describe('ReactRefresh app', () => {
 
     let didFullRefresh = !(await session.patch(
       'SurveyOverview.js',
-      `
+      outdent`
         const SurveyOverview = () => {
           return 200;
         };
@@ -189,7 +184,7 @@ describe('ReactRefresh app', () => {
 
     didFullRefresh = !(await session.patch(
       'index.js',
-      `
+      outdent`
         import * as React from 'react';
 
         import DashboardPage from './routes';
@@ -209,7 +204,7 @@ describe('ReactRefresh app', () => {
 
     didFullRefresh = !(await session.patch(
       'SurveyOverview.js',
-      `
+      outdent`
         const SurveyOverview = () => {
           return 300;
         };