From 7d0aaac2966ded874819a92b73119943b3895eee Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 13 Dec 2023 12:23:14 +0000 Subject: [PATCH 1/5] Update example dependencies --- examples/with-cypress/package.json | 2 +- examples/with-jest/package.json | 14 +++++++------- examples/with-playwright/package.json | 6 +++--- examples/with-vitest/package.json | 10 +++++----- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/examples/with-cypress/package.json b/examples/with-cypress/package.json index 006f34150126f..e9c5f45ae9549 100644 --- a/examples/with-cypress/package.json +++ b/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" }, diff --git a/examples/with-jest/package.json b/examples/with-jest/package.json index b2cb24577c0d4..e580311e337ce 100644 --- a/examples/with-jest/package.json +++ b/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" } } diff --git a/examples/with-playwright/package.json b/examples/with-playwright/package.json index ede02ffd8049d..66fac28ce9a48 100644 --- a/examples/with-playwright/package.json +++ b/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" } } diff --git a/examples/with-vitest/package.json b/examples/with-vitest/package.json index 83a87a3c7a8fc..acda095c3dcb3 100644 --- a/examples/with-vitest/package.json +++ b/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" } } From c7932274bfa8434a70534175cddb102cde302914 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 13 Dec 2023 12:23:23 +0000 Subject: [PATCH 2/5] Add bun command for vitest --- .../01-building-your-application/08-testing/01-vitest.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx b/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx index 5b79dbfcc85b6..3190422bb85fe 100644 --- a/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx +++ b/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx @@ -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: From fe6b6ba0fb6c3e165df627c9451b5c9f0434de2f Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 13 Dec 2023 12:23:37 +0000 Subject: [PATCH 3/5] Improve wording on E2E testing --- docs/02-app/01-building-your-application/08-testing/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/02-app/01-building-your-application/08-testing/index.mdx b/docs/02-app/01-building-your-application/08-testing/index.mdx index 51fa0c40333ca..2b56c5eaa29d6 100644 --- a/docs/02-app/01-building-your-application/08-testing/index.mdx +++ b/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. From 43c5574d658d3ca3332a7294ff8c084db8ba98bb Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 13 Dec 2023 13:40:27 +0000 Subject: [PATCH 4/5] Fix nav_titles --- .../01-building-your-application/08-testing/01-vitest.mdx | 2 +- docs/02-app/01-building-your-application/08-testing/02-jest.mdx | 2 +- .../01-building-your-application/08-testing/03-playwright.mdx | 2 +- .../01-building-your-application/08-testing/04-cypress.mdx | 2 +- .../01-building-your-application/07-testing/01-vitest.mdx | 2 +- .../01-building-your-application/07-testing/02-jest.mdx | 2 +- .../01-building-your-application/07-testing/03-playwright.mdx | 2 +- .../01-building-your-application/07-testing/04-cypress.mdx | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx b/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx index 3190422bb85fe..1ad2a1a0534d3 100644 --- a/docs/02-app/01-building-your-application/08-testing/01-vitest.mdx +++ b/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. --- diff --git a/docs/02-app/01-building-your-application/08-testing/02-jest.mdx b/docs/02-app/01-building-your-application/08-testing/02-jest.mdx index e9f923ea78e9c..5529cde26710c 100644 --- a/docs/02-app/01-building-your-application/08-testing/02-jest.mdx +++ b/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. --- diff --git a/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx b/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx index edb66aebec180..ef29763e24525 100644 --- a/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx +++ b/docs/02-app/01-building-your-application/08-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 Playwright with Next.js for End-to-End (E2E) testing. --- diff --git a/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx b/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx index 88e7e235d7448..b484d3e2d61ca 100644 --- a/docs/02-app/01-building-your-application/08-testing/04-cypress.mdx +++ b/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. --- diff --git a/docs/03-pages/01-building-your-application/07-testing/01-vitest.mdx b/docs/03-pages/01-building-your-application/07-testing/01-vitest.mdx index 14ec92b7209cd..7a7fdb7b23ff2 100644 --- a/docs/03-pages/01-building-your-application/07-testing/01-vitest.mdx +++ b/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 --- diff --git a/docs/03-pages/01-building-your-application/07-testing/02-jest.mdx b/docs/03-pages/01-building-your-application/07-testing/02-jest.mdx index 83e6593b3d31f..993ccdc09f3c4 100644 --- a/docs/03-pages/01-building-your-application/07-testing/02-jest.mdx +++ b/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 --- diff --git a/docs/03-pages/01-building-your-application/07-testing/03-playwright.mdx b/docs/03-pages/01-building-your-application/07-testing/03-playwright.mdx index 79f5313141b78..77fab146905a9 100644 --- a/docs/03-pages/01-building-your-application/07-testing/03-playwright.mdx +++ b/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 --- diff --git a/docs/03-pages/01-building-your-application/07-testing/04-cypress.mdx b/docs/03-pages/01-building-your-application/07-testing/04-cypress.mdx index 7eb9761c191a5..e8530c9ff3bf6 100644 --- a/docs/03-pages/01-building-your-application/07-testing/04-cypress.mdx +++ b/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 --- From 3984d2fa9973c61f9d267d4b56eb4bcd927a0289 Mon Sep 17 00:00:00 2001 From: Delba de Oliveira Date: Wed, 13 Dec 2023 13:44:17 +0000 Subject: [PATCH 5/5] Fix tags --- .../01-building-your-application/08-testing/02-jest.mdx | 4 +--- .../01-building-your-application/08-testing/03-playwright.mdx | 4 ---- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/docs/02-app/01-building-your-application/08-testing/02-jest.mdx b/docs/02-app/01-building-your-application/08-testing/02-jest.mdx index 5529cde26710c..13c22e4d14548 100644 --- a/docs/02-app/01-building-your-application/08-testing/02-jest.mdx +++ b/docs/02-app/01-building-your-application/08-testing/02-jest.mdx @@ -294,7 +294,7 @@ describe('Home', () => { }) ``` - + @@ -331,8 +331,6 @@ describe('Page', () => { - - Optionally, add a [snapshot test](https://jestjs.io/docs/snapshot-testing) to keep track of any unexpected changes in your component: diff --git a/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx b/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx index ef29763e24525..0ba9ca61ae7b9 100644 --- a/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx +++ b/docs/02-app/01-building-your-application/08-testing/03-playwright.mdx @@ -6,8 +6,6 @@ description: Learn how to set up Playwright with Next.js for End-to-End (E2E) te 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. - - ## 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 ``` - - ## Manual setup To install Playwright, run the following command: