Skip to content

Commit

Permalink
Docs: Fix formatting in testing docs and update examples dependencies (
Browse files Browse the repository at this point in the history
…#59572)

Follow-up from: #59268
  • Loading branch information
delbaoliveira authored Dec 13, 2023
1 parent 9dfeced commit f518fd8
Show file tree
Hide file tree
Showing 13 changed files with 27 additions and 29 deletions.
Original file line number Diff line number Diff line change
@@ -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.
---

Expand All @@ -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:
Expand Down
Original file line number Diff line number Diff line change
@@ -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.
---

Expand Down
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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:
Expand Down
Original file line number Diff line number Diff line change
@@ -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.
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Original file line number Diff line number Diff line change
@@ -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
---
Expand Down
Original file line number Diff line number Diff line change
@@ -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
---
Expand Down
Original file line number Diff line number Diff line change
@@ -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
---
Expand Down
Original file line number Diff line number Diff line change
@@ -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
---
Expand Down
2 changes: 1 addition & 1 deletion examples/with-cypress/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
14 changes: 7 additions & 7 deletions examples/with-jest/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
6 changes: 3 additions & 3 deletions examples/with-playwright/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
10 changes: 5 additions & 5 deletions examples/with-vitest/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}

0 comments on commit f518fd8

Please sign in to comment.