Update pnpm new-test to use createNextDescribe (#44147)

plopfile.js

@@ -6,6 +6,12 @@ module.exports = function (plop) {
   plop.setGenerator('test', {
     description: 'Create a new test',
     prompts: [
+      {
+        type: 'confirm',
+        name: 'appDir',
+        message: 'Is this test for the app directory?',
+        default: false,
+      },
       {
         type: 'input',
         name: 'name',
@@ -38,10 +44,17 @@ module.exports = function (plop) {
             data.type === 'unit' ? 'unit' : 'e2e'
           }/example.txt`,
           path: `test/{{type}}/${
-            data.type === 'unit'
-              ? `${fileName}.test.ts`
-              : `${fileName}/index.test.ts`
-          }`,
+            data.appDir ? 'app-dir/' : ''
+          }${fileName}/${fileName}.test.ts`,
+        },
+        {
+          type: 'add',
+          templateFile: `test/${
+            data.type === 'unit' ? 'unit' : 'e2e'
+          }/example-file.txt`,
+          path: `test/{{type}}/${
+            data.appDir ? 'app-dir/' : ''
+          }${fileName}/pages/index.js`,
         },
       ]
     },

test/e2e/example-file.txt

@@ -0,0 +1,3 @@
+export default function Page() { 
+    return <p>hello world</p>
+} 

test/e2e/example.txt

@@ -1,26 +1,34 @@
-import { createNext } from 'e2e-utils'
-import { NextInstance } from 'test/lib/next-modes/base'
-import { renderViaHTTP } from 'next-test-utils'
+import { createNextDescribe } from 'e2e-utils'
 
-describe('{{name}}', () => {
-  let next: NextInstance
+createNextDescribe(
+  '{{name}}',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+    it('should work using cheerio', async () => {
+      const $ = await next.render$('/')
+      expect($('p').text()).toBe('hello world')
+    })
+
+    // Recommended for tests that need a full browser
+    it('should work using browser', async () => {
+      const browser = await next.browser('/')
+      expect(await browser.getElementByCss('p').text()).toBe('hello world')
+    })
 
-  beforeAll(async () => {
-    next = await createNext({
-      files: { 
-        'pages/index.js': `
-          export default function Page() { 
-            return <p>hello world</p>
-          } 
-        `
-      },
-      dependencies: {}
+    // In case you need the full HTML. Can also use $.html() with cheerio.
+    it('should work with html', async () => {
+      const html = await next.render('/')
+      expect(html).toContain('hello world')
     })
-  })
-  afterAll(() => next.destroy())
 
-  it('should work', async () => {
-    const html = await renderViaHTTP(next.url, '/')
-    expect(html).toContain('hello world')
-  })
-})
+    // In case you need to test the response object
+    it('should work with fetch', async () => {
+      const res = await next.fetch('/')
+      const html = await res.text()
+      expect(html).toContain('hello world')
+    })
+  }
+)