Docs: Fix formatting in testing docs and update examples dependencies (#59572)

Follow-up from: https://github.com/vercel/next.js/pull/59268

docs/02-app/01-building-your-application/08-testing/01-vitest.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Vitest with Next.js
-nav: Vitest
+nav_title: Vitest
 description: Learn how to set up Vitest with Next.js for Unit Testing.
 ---
 
@@ -26,6 +26,8 @@ npm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
 yarn add -D vitest @vitejs/plugin-react jsdom @testing-library/react @vitejs/plugin-react
 # or
 pnpm install -D vitest @vitejs/plugin-react jsdom @testing-library/react
+# or
+bun add -D Vitest @vitejs/plugin-react jsdom @testing-library/react
 ```
 
 Create a `vitest.config.ts|js` file in the root of your project, and add the following options:

docs/02-app/01-building-your-application/08-testing/02-jest.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Jest with Next.js
-nav: Jest
+nav_title: Jest
 description: Learn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.
 ---
 

docs/02-app/01-building-your-application/08-testing/03-playwright.mdx

@@ -1,13 +1,11 @@
 ---
 title: Setting up Playwright with Next.js
-nav: Playwright
+nav_title: Playwright
 description: Learn how to set up Playwright with Next.js for End-to-End (E2E) testing.
 ---
 
 Playwright is a testing framework that lets you automate Chromium, Firefox, and WebKit with a single API. You can use it to write **End-to-End (E2E)** testing. This guide will show you how to set up Playwright with Next.js and write your first tests.
 
-<PagesOnly>
-
 ## Quickstart
 
 The fastest way to get started is to use `create-next-app` with the [with-playwright example](https://github.com/vercel/next.js/tree/canary/examples/with-playwright). This will create a Next.js project complete with Playwright configured.
@@ -16,8 +14,6 @@ The fastest way to get started is to use `create-next-app` with the [with-playwr
 npx create-next-app@latest --example with-playwright with-playwright-app
 ```
 
-</PagesOnly>
-
 ## Manual setup
 
 To install Playwright, run the following command:

docs/02-app/01-building-your-application/08-testing/04-cypress.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Cypress with Next.js
-nav: Cypress
+nav_title: Cypress
 description: Learn how to set up Cypress with Next.js for End-to-End (E2E) and Component Testing.
 ---
 

docs/02-app/01-building-your-application/08-testing/index.mdx

@@ -15,7 +15,7 @@ In React and Next.js, there are a few different types of tests you can write, ea
 
 ## Async Server Components
 
-Since `async` Server Components are new to the React ecosystem, some tools may not yet fully support them. We recommend using **End-to-End Testing** over **Unit Testing** for `async` components.
+Since `async` Server Components are new to the React ecosystem, some tools do not fully support them. In the meantime, we recommend using **End-to-End Testing** over **Unit Testing** for `async` components.
 
 </AppOnly>
 

docs/03-pages/01-building-your-application/07-testing/01-vitest.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Vitest with Next.js
-nav: Jest
+nav_title: Jest
 description: Learn how to set up Next.js with Vitest and React Testing Library - two popular unit testing libraries.
 source: app/building-your-application/testing/vitest
 ---

docs/03-pages/01-building-your-application/07-testing/02-jest.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Jest with Next.js
-nav: Jest
+nav_title: Jest
 description: Learn how to set up Next.js with Jest for Unit Testing.
 source: app/building-your-application/testing/jest
 ---

docs/03-pages/01-building-your-application/07-testing/03-playwright.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Playwright with Next.js
-nav: Playwright
+nav_title: Playwright
 description: Learn how to set up Next.js with Playwright for End-to-End (E2E) and Integration testing.
 source: app/building-your-application/testing/playwright
 ---

docs/03-pages/01-building-your-application/07-testing/04-cypress.mdx

@@ -1,6 +1,6 @@
 ---
 title: Setting up Cypress with Next.js
-nav: Cypress
+nav_title: Cypress
 description: Learn how to set up Next.js with Cypress for End-to-End (E2E) and Component Testing.
 source: app/building-your-application/testing/cypress
 ---

examples/with-cypress/package.json

@@ -10,7 +10,7 @@
     "component:headless": "cypress run --component"
   },
   "dependencies": {
-    "next": "^14.0.1",
+    "next": "^latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/with-jest/package.json

@@ -14,12 +14,12 @@
     "server-only": "^0.0.1"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "6.1.2",
-    "@testing-library/react": "14.0.0",
-    "@types/jest": "29.5.5",
-    "@types/react": "18.2.8",
-    "jest": "29.6.4",
-    "jest-environment-jsdom": "29.6.4",
-    "typescript": "5.2.2"
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
+    "@types/jest": "29.5.11",
+    "@types/react": "18.2.45",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "typescript": "5.3.3"
   }
 }

examples/with-playwright/package.json

@@ -8,13 +8,13 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.40.1",
     "@types/node": "20.10.4",
-    "@types/react": "18.2.43",
+    "@types/react": "18.2.45",
     "typescript": "5.3.3"
   }
 }

examples/with-vitest/package.json

@@ -13,12 +13,12 @@
     "server-only": "^0.0.1"
   },
   "devDependencies": {
-    "@testing-library/react": "14.0.0",
-    "@types/node": "20.5.9",
-    "@types/react": "18.2.8",
+    "@testing-library/react": "14.1.2",
+    "@types/node": "20.10.4",
+    "@types/react": "18.2.45",
     "@vitejs/plugin-react": "^4.2.1",
     "jsdom": "^23.0.1",
-    "typescript": "5.2.2",
-    "vitest": "0.34.3"
+    "typescript": "5.3.3",
+    "vitest": "1.0.4"
   }
 }