archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
rsnext/examples/with-playwright
History
Delba de Oliveira 0ddc7e8fad
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-12 22:30:23 -06:00
..
app Docs: Add App Router Testing Guides and update /examples (#59268) 2023-12-12 22:30:23 -06:00
e2e Docs: Add App Router Testing Guides and update /examples (#59268) 2023-12-12 22:30:23 -06:00
pages Docs: Add App Router Testing Guides and update /examples (#59268) 2023-12-12 22:30:23 -06:00
public examples: Add Playwright testing example (#29426) 2021-11-14 14:17:59 -06:00
styles Fix playwright tests (#36705) 2022-05-05 10:08:28 -05:00
.gitignore Add .yarn/install-state.gz to .gitignore (#56637) 2023-10-18 16:34:48 +00:00
package.json Docs: Add App Router Testing Guides and update /examples (#59268) 2023-12-12 22:30:23 -06:00
playwright.config.ts Correct spelling in playwright docs (#55557) 2023-09-18 22:59:01 +00:00
README.md update example Deploy button URLs (#48842) 2023-04-26 13:31:44 -04:00
tsconfig.json Docs: Add App Router Testing Guides and update /examples (#59268) 2023-12-12 22:30:23 -06:00

README.md

Next.js + Playwright

This example shows how to configure Playwright to work with Next.js.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-playwright with-playwright-app

yarn create next-app --example with-playwright with-playwright-app

pnpm create next-app --example with-playwright with-playwright-app

Deploy it to the cloud with Vercel (Documentation).