rsnext/examples/with-playwright/app/page.tsx

11 lines
162 B
TypeScript
Raw Normal View History

import Link from "next/link";
Docs: Add App Router Testing Guides and update /examples (#59268) This PR updates the testing guides to use App Router and TypeScript, also updates `/examples` to show `app` and `pages` examples. ## Overview - [x] Create a new "Testing" section that is shared between `app` and `pages`. - [x] Explain the differences between E2E, unit testing, component testing, etc. - [x] Recommend E2E for `async` components as currently none of the tools support it. - [x] Update setup guides for **Cypress**, **Playwright**, and **Jest** with latest config options, and examples for `app` and `pages`. - [x] Add new guide for **Vitest** - [x] Clean up `/examples`: use TS, show `app` and `pages` examples, match docs config ## Cypress - [x] E2E Tests - [x] Component Testing - [x] Client Components - [x] Server Components - [ ] `async` components **Blockers:** - TS: `Option 'bundler' can only be used when 'module' is set to 'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses "moduleResolution": "bundler", changing it to "node" fixes the issue but it can have repercussions. - https://github.com/cypress-io/cypress/issues/27731 - Version 14 is currently not supported for component testing - https://github.com/cypress-io/cypress/issues/28185 ## Playwright - [x] E2E Tests ## Jest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components: https://github.com/testing-library/react-testing-library/issues/1209 - [x] 'server-only': https://github.com/vercel/next.js/pull/54891 - [x] Snapshot Testing **Blockers:** - TS: https://github.com/testing-library/jest-dom/issues/546 - None of the solutions in the issue work with Next.js v14.0.4 and TS v5 ## Vitest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components - [x] 'server-only' - [x] Update vitest example - [x] Handles CSS, and CSS modules imports - [x] Handles next/image ## Other - https://github.com/vercel/next.js/issues/47448 - https://github.com/vercel/next.js/issues/47299
2023-12-13 05:30:23 +01:00
export default function Page() {
return (
<div>
<h1>Home</h1>
<Link href="/about">About</Link>
</div>
);
Docs: Add App Router Testing Guides and update /examples (#59268) This PR updates the testing guides to use App Router and TypeScript, also updates `/examples` to show `app` and `pages` examples. ## Overview - [x] Create a new "Testing" section that is shared between `app` and `pages`. - [x] Explain the differences between E2E, unit testing, component testing, etc. - [x] Recommend E2E for `async` components as currently none of the tools support it. - [x] Update setup guides for **Cypress**, **Playwright**, and **Jest** with latest config options, and examples for `app` and `pages`. - [x] Add new guide for **Vitest** - [x] Clean up `/examples`: use TS, show `app` and `pages` examples, match docs config ## Cypress - [x] E2E Tests - [x] Component Testing - [x] Client Components - [x] Server Components - [ ] `async` components **Blockers:** - TS: `Option 'bundler' can only be used when 'module' is set to 'es2015' or later`. In **tsconfig.json** compilerOptions, Next.js uses "moduleResolution": "bundler", changing it to "node" fixes the issue but it can have repercussions. - https://github.com/cypress-io/cypress/issues/27731 - Version 14 is currently not supported for component testing - https://github.com/cypress-io/cypress/issues/28185 ## Playwright - [x] E2E Tests ## Jest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components: https://github.com/testing-library/react-testing-library/issues/1209 - [x] 'server-only': https://github.com/vercel/next.js/pull/54891 - [x] Snapshot Testing **Blockers:** - TS: https://github.com/testing-library/jest-dom/issues/546 - None of the solutions in the issue work with Next.js v14.0.4 and TS v5 ## Vitest - [x] Unit Testing - [x] Client Components - [x] Server Components - [ ] `async` components - [x] 'server-only' - [x] Update vitest example - [x] Handles CSS, and CSS modules imports - [x] Handles next/image ## Other - https://github.com/vercel/next.js/issues/47448 - https://github.com/vercel/next.js/issues/47299
2023-12-13 05:30:23 +01:00
}