INTER-2322: e2e test CI matrix for examples (React 18 & 19) by JuroUhlar · Pull Request #204 · fingerprintjs/react

JuroUhlar · 2026-07-19T21:46:50Z

Adds a Playwright e2e matrix that builds and serves each example, then asserts a visitor ID renders in the browser (React 18 + 19; Preact once via preact/compat).
e2e/examples.ts is the single source of truth (example → build+serve command + port); CI selects one via EXAMPLE.
Optional *_FPJS_REGION support in every example (default behavior unchanged).
Fixes found while wiring this: missing CRA react-app-env.d.ts; remove broken Preact preact.config.js (redundant with CLI env injection).

Closes INTER-2322.

Discussion point: build+serve instead of `dev`

E2e boots production builds (build then start/preview/serve) so bundling failures (and each example’s own typecheck, where it has one) fail before Playwright. Preact folds tsc into its build script because preact-cli itself does not typecheck.

Required CI config

Settings → Secrets and variables → Actions:

FPJS_PUBLIC_API_KEY — public API key (secret or variable)
FPJS_REGION — optional us | eu | ap (must match the key when set)

The workflow fails fast if the API key is missing, or if FPJS_REGION is set to an invalid value.

Matrix

Example	React 18	React 19
create-react-app, vite, webpack-based, next, next-appDir	✅	✅
preact	once (`preact/compat`)	—

Widen the react peer range to >=18 <20, verify the SDK against React 19 via a second CI matrix job (catalog stays pinned to 18 as the default dev/test toolchain), and bump the Next.js examples to 16.2.10. Add @next/eslint-plugin-next lint rules scoped to the Next examples instead of eslint-config-next, since the latter bundles eslint-plugin-react which only supports ESLint below version 10. Re-add the two @eslint-react rule overrides for React 19-only idioms so linting stays green under both supported versions.

Next.js 16 requires Node >=20.9.0; declare it explicitly so contributors on older Node get a clear engine error instead of a confusing runtime failure.

no-html-link-for-pages (and other core-web-vitals rules) default to looking for pages/app at the repo root, so they silently no-op since both Next examples live under examples/. Set settings.next.rootDir to point at them explicitly.

Add a CI matrix that boots each example app with Playwright and asserts the Fingerprint React SDK identifies the visitor (a visitor ID renders in the browser). Each example is tested against the React versions it supports. - e2e/: a single Playwright harness driven by an EXAMPLE env var, with a per-example registry (examples.ts) and one framework-agnostic spec. - .github/workflows/e2e.yml: matrix of {example} x {React 18, 19}. React 19 jobs flip the pnpm catalog so the SDK and every example move in lockstep (a single @types/react, which the Next App Router type-check requires). The preact example runs once (it uses Preact via preact/compat). - examples: optional region env support (the CI key is EU) that leaves the default behavior unchanged. Also fixes pre-existing build breakage: the CRA example was missing react-app-env.d.ts, and the preact example's ESM preact.config.js failed to load on Node 22 (and was redundant with preact-cli's native .env / PREACT_APP_* injection) so it was removed and a scoped process type declaration added. INTER-2322 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F14pjZxadmtLq8uTuzwXb

Read the Fingerprint region from the FPJS_REGION Actions variable (defaulting to eu) instead of hardcoding it, so the region is configurable alongside the public key secret. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F14pjZxadmtLq8uTuzwXb

Drop the eu fallback so the region comes solely from the FPJS_REGION repo variable, and fail fast in the pre-flight check when it (or the API key secret) is missing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F14pjZxadmtLq8uTuzwXb

github-actions · 2026-07-19T21:48:13Z

Coverage report

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.43%	122/148
🟡	Branches	68.97%	60/87
🟢	Functions	80.85%	38/47
🟢	Lines	82.52%	118/143

Test suite run success

23 tests passing in 15 suites.

Report generated by 🧪jest coverage report action from 0e47870

Show full coverage report

St	File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
🟢	All files	82.43	68.96	80.85	82.51
🟢	src	88.52	74.07	83.33	88.33
🟢	detect-env.ts	90	83.33	100	90	15,87
🟢	env.ts	100	100	100	100
🟢	env.types.ts	83.33	0	50	83.33	14
🟡	...nt-context.ts	75	100	0	75	8
🟡	get-env.ts	60	0	100	60	8-9
🟢	ssr.ts	100	100	100	100
🟢	...sitor-data.ts	95.65	100	80	95.65	102
🟢	src/components	91.66	58.33	91.66	91.17
🟢	...-provider.tsx	90.32	54.54	90.9	89.65	47,52,85
🟢	...vironment.tsx	100	100	100	100
🟡	src/utils	68.62	72.22	70.58	69.38
🟡	...is-defined.ts	50	75	100	50	3
🟢	...-cache-key.ts	80.76	83.33	85.71	84	5,10,43,52
🟡	to-error.ts	66.66	50	100	66.66	6
🟢	...mise-store.ts	100	100	100	100
🔴	wait-until.ts	0	0	0	0	8-19

The Fingerprint public key isn't sensitive, so read FPJS_PUBLIC_API_KEY from either a repo secret or a repo variable. Fixes the matrix failing when the key was added under the Variables tab alongside FPJS_REGION. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F14pjZxadmtLq8uTuzwXb

preact-cli's dev server (`preact watch`) fails to resolve its entrypoint on the CI Node version and never serves, so the e2e job timed out. Build the example once and serve the static output with sirv instead. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014F14pjZxadmtLq8uTuzwXb

Align examples on a shared data-testid for successful identifies, flip React via pnpm overrides instead of sed, and verify the installed React major in CI.

Copilot

Pull request overview

Adds a Playwright end-to-end test suite and GitHub Actions matrix to build+serve each example app (React 18 + React 19; plus a one-off Preact run), then assert a visitor ID renders in the browser. This also standardizes example outputs for e2e by adding a shared data-testid="visitor-id" target and optional *_FPJS_REGION env support across examples.

Changes:

Introduces e2e/ Playwright config + tests, plus a CI workflow that runs a per-example matrix across React 18/19.
Updates examples to render a consistent visitor-id test target and to optionally pass region into FingerprintProvider.
Adjusts example build/serve scripts and adds required tooling deps (@playwright/test, sirv-cli) and ignores Playwright artifacts.

Reviewed changes

Copilot reviewed 37 out of 42 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
tsconfig.eslint.json	Includes `e2e/*/.ts` in ESLint’s TS project scope.
pnpm-lock.yaml	Locks new dev deps (Playwright + sirv-cli) and related transitive changes.
package.json	Adds `test:e2e` script and Playwright dev dependency.
examples/webpack-based/webpack.config.js	Makes dotenv loading tolerant of missing `.env.local` and allows CI env fallback.
examples/webpack-based/src/index.js	Adds optional region env parsing and passes `region` to provider.
examples/webpack-based/src/App.js	Renders visitor ID in a consistent `data-testid="visitor-id"` span.
examples/webpack-based/package.json	Adds production build mode and `serve` command (sirv).
examples/webpack-based/.env.example	Documents optional `REACT_APP_FPJS_REGION`.
examples/vite/src/vite-env.d.ts	Declares optional `VITE_FPJS_REGION`.
examples/vite/src/main.tsx	Parses optional region env and passes `region` to provider.
examples/vite/src/App.tsx	Renders visitor ID in a `data-testid="visitor-id"` span and simplifies hook usage.
examples/vite/package.json	Pins preview port/strictPort and adds `typecheck` script.
examples/vite/.env.example	Documents optional `VITE_FPJS_REGION`.
examples/preact/src/index.tsx	Parses optional region env and passes `region` to provider.
examples/preact/src/env.d.ts	Adds a minimal `process.env.PREACT_APP_*` declaration for TS without Node types.
examples/preact/src/components/app.tsx	Adds `data-testid="visitor-id"` to the visitor-id element.
examples/preact/preact.config.js	Removes custom dotenv/DefinePlugin injection.
examples/preact/package.json	Adds `typecheck` and runs it as part of `build`; removes dotenv dep.
examples/preact/.env.example	Documents optional `PREACT_APP_FPJS_REGION`.
examples/next/pages/index.tsx	Adds `data-testid="visitor-id"` around the visitor ID.
examples/next/pages/_app.tsx	Parses optional `NEXT_PUBLIC_FPJS_REGION` and passes `region` to provider.
examples/next/package.json	Fixes `start` port and adds `typecheck`.
examples/next/.env.example	Documents optional `NEXT_PUBLIC_FPJS_REGION`.
examples/next-appDir/package.json	Fixes `start` port and adds `typecheck`.
examples/next-appDir/app/layout.tsx	Parses optional `NEXT_PUBLIC_FPJS_REGION` and passes `region` to provider.
examples/next-appDir/app/HomePage.tsx	Adds `data-testid="visitor-id"` around the visitor ID.
examples/next-appDir/.env.example	Documents optional `NEXT_PUBLIC_FPJS_REGION`.
examples/create-react-app/src/shared/utils/env.ts	Adds optional `REACT_APP_FPJS_REGION` parsing/export.
examples/create-react-app/src/shared/components/VisitorDataPresenter.tsx	Wraps visitor ID in `data-testid="visitor-id"` for e2e targeting and tightens rendering checks.
examples/create-react-app/src/session_storage_cache/SessionStorageCache.tsx	Passes `region` into provider.
examples/create-react-app/src/react-app-env.d.ts	Adds CRA type refs and CSS module declaration to fix TS compatibility.
examples/create-react-app/src/no_cache/WithoutCache.tsx	Passes `region` into provider.
examples/create-react-app/src/local_storage_cache/LocalStorageCache.tsx	Passes `region` into provider.
examples/create-react-app/src/in_memory_cache/InMemoryCache.tsx	Passes `region` into provider.
examples/create-react-app/package.json	Adds sirv-based `serve` and a `typecheck` script.
examples/create-react-app/.env.example	Documents optional `REACT_APP_FPJS_REGION`.
e2e/tests/example.spec.ts	Adds a framework-agnostic Playwright test asserting the visitor ID renders.
e2e/README.md	Documents how the e2e system works and how to run it locally.
e2e/playwright.config.ts	Adds Playwright config that builds+serves the selected example via `EXAMPLE`.
e2e/examples.ts	Defines the example→command/port mapping and `resolveExample`.
.gitignore	Ignores Playwright reports, test results, and e2e cache.
.github/workflows/e2e.yml	Adds CI job matrix to run e2e per-example across React 18/19 (+ Preact).

Files not reviewed (1)

pnpm-lock.yaml: Generated file

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

JuroUhlar · 2026-07-21T08:10:24Z

@copilot resolve the merge conflicts in this pull request

Copilot · 2026-07-21T08:15:59Z

@copilot resolve the merge conflicts in this pull request

Resolved the merge conflicts with main in merge commit 0e47870. Unit tests, build, and validation checks passed; the new GitHub workflow runs are currently action_required with no jobs started yet.

github-actions · 2026-07-21T08:40:41Z

🚀 Following releases will be created using changesets from this PR:

@fingerprint/react@3.1.0

Minor Changes

Add support for React 19 and Next.js 16. The react peer range now accepts >=18 <20. (5307b3b)

Patch Changes

Bump @fingerprint/agent dependency to ^4.1.2 and drop the fast-deep-equal runtime dependency in favor of an internal cache-key comparison. (87b776f)

JuroUhlar and others added 7 commits July 17, 2026 08:39

fix: declare Node engine requirement in Next example apps

1ff896f

Next.js 16 requires Node >=20.9.0; declare it explicitly so contributors on older Node get a clear engine error instead of a confusing runtime failure.

chore: update CI workflow name for clarity

f999113

JuroUhlar changed the base branch from main to inter-2317/react-19-next-16-support July 19, 2026 21:48

claude and others added 10 commits July 19, 2026 21:57

ci(e2e): harden workflow validation

943e78e

test(e2e): harden visitor-id assertion and React 19 switch

1dd3d8d

Align examples on a shared data-testid for successful identifies, flip React via pnpm overrides instead of sed, and verify the installed React major in CI.

chore: region param optional

eda0ea9

chore: clean up

7dd5fe7

chore: tighten EXAMPLES key typing with satisfies

b4cfbc1

test(e2e): validate production builds

bca2da5

fix(examples): guard optional region env access

f83b75f

chore: fold preact typecheck into example build

c9b927f

JuroUhlar requested a review from Copilot July 20, 2026 12:35

Copilot started reviewing on behalf of JuroUhlar July 20, 2026 12:35 View session

Copilot AI reviewed Jul 20, 2026

View reviewed changes

Comment thread e2e/examples.ts

Comment thread examples/webpack-based/src/index.js

JuroUhlar added 2 commits July 20, 2026 14:40

fix(examples): drop deprecated TypeScript 6 compiler options

c1cabef

fix: address Copilot review on example name check and env reads

8e2846b

JuroUhlar marked this pull request as ready for review July 20, 2026 12:53

JuroUhlar requested review from TheUnderScorer and ilfa as code owners July 20, 2026 12:53

Base automatically changed from inter-2317/react-19-next-16-support to main July 21, 2026 08:09

Copilot started work on behalf of JuroUhlar July 21, 2026 08:10 View session

chore: merge main into examples e2e branch

0e47870

Copilot finished work on behalf of JuroUhlar July 21, 2026 08:16

TheUnderScorer approved these changes Jul 21, 2026

View reviewed changes

JuroUhlar merged commit be7a5c4 into main Jul 21, 2026
24 checks passed

JuroUhlar deleted the inter-2322/e2e-test-ci-matrix branch July 21, 2026 08:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

INTER-2322: e2e test CI matrix for examples (React 18 & 19)#204

INTER-2322: e2e test CI matrix for examples (React 18 & 19)#204
JuroUhlar merged 20 commits into
mainfrom
inter-2322/e2e-test-ci-matrix

JuroUhlar commented Jul 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 19, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

JuroUhlar commented Jul 21, 2026

Uh oh!

Copilot AI commented Jul 21, 2026

Uh oh!

github-actions Bot commented Jul 21, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

JuroUhlar commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Discussion point: build+serve instead of dev

Required CI config

Matrix

Uh oh!

github-actions Bot commented Jul 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

JuroUhlar commented Jul 21, 2026

Uh oh!

Copilot AI commented Jul 21, 2026

Uh oh!

github-actions Bot commented Jul 21, 2026

🚀 Following releases will be created using changesets from this PR:

@fingerprint/react@3.1.0

Minor Changes

Patch Changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

JuroUhlar commented Jul 19, 2026 •

edited

Loading

Discussion point: build+serve instead of `dev`

github-actions Bot commented Jul 19, 2026 •

edited

Loading