test(nextjs): Add NextJS client-side E2E tests #6669

onurtemizkan · 2023-01-05T17:35:48Z

Ref: #6292 (Only client-side is tested)

Added a create-next-app application to our E2E test-applications.
Added the default behaviour tests (error / pageload / navigation) in Playwright.
(This set of tests are exactly the same with what we have for standard-frontend-react test application, which made me wonder if we can extract most of them to utilities, as they don't seem library / framework dependent)
Also added 2 recipes; one for dev mode, one for build mode, as we had issues specifically happen on dev mode before. -> @sentry/nextjs v.7.21.1 broke "npm run dev" - works for v.7.21.0 #6284

github-actions · 2023-01-05T17:49:41Z

size-limit report 📦

Path	Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified)	19.84 KB (+0.01% 🔺)
@sentry/browser - ES5 CDN Bundle (minified)	61.46 KB (0%)
@sentry/browser - ES6 CDN Bundle (gzipped + minified)	18.62 KB (+0.02% 🔺)
@sentry/browser - ES6 CDN Bundle (minified)	55 KB (0%)
@sentry/browser - Webpack (gzipped + minified)	20.38 KB (0%)
@sentry/browser - Webpack (minified)	66.55 KB (0%)
@sentry/react - Webpack (gzipped + minified)	20.4 KB (0%)
@sentry/nextjs Client - Webpack (gzipped + minified)	47.63 KB (0%)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified)	26.82 KB (+0.02% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified)	25.25 KB (-0.01% 🔽)
@sentry/replay ES6 CDN Bundle (gzipped + minified)	43.26 KB (-0.01% 🔽)
@sentry/replay - Webpack (gzipped + minified)	38.5 KB (0%)

onurtemizkan · 2023-01-06T14:48:14Z

The auto-upload of sourcemaps returns with 403. Do we need to add release/upload access to the auth token we use in the GitHub CI?

lforst

Already looking good! Noted some minor things. Thank you! :)

lforst · 2023-01-11T10:42:25Z

packages/e2e-tests/test-applications/create-next-app/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


I think we can remove all these static assets and also the .css files. They're not really relevant to our tests.

👍 7790eb3

lforst · 2023-01-11T10:46:13Z

packages/e2e-tests/test-applications/create-next-app/tsconfig.json

+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true


I am getting an error "Option 'noEmit' cannot be specified with option 'incremental'." here. Is this something you added or something Next.js generated?

Yes, that's auto-generated / modified by Next.JS. Tried to suppress it, but thought that might make the application diverted from the original create-next-app. This will get resolved when we update our TS version, though.

lforst · 2023-01-11T10:50:34Z

packages/e2e-tests/run.ts

+  SENTRY_ORG: process.env.E2E_TEST_SENTRY_ORG_SLUG,
+  SENTRY_PROJECT: process.env.E2E_TEST_SENTRY_TEST_PROJECT,
+  SENTRY_AUTH_TOKEN: process.env.E2E_TEST_AUTH_TOKEN,


These shouldn't be needed in this PR yet. Let's remove them here until we actually get to the part where we're thesting the uploading of source maps.

👍 394b73b

lforst · 2023-01-11T10:52:51Z

packages/e2e-tests/test-applications/create-next-app/tests/client/behaviour.test.ts

@@ -0,0 +1,171 @@
+import { test, expect } from '@playwright/test';


We should definitely extract this into a helper sometime in the future. Doesn't have to be this PR. I say after we would add this kind of file 2 more times we go for it. The only thing I am worried just now that there is some custom thing we need to do in some framework and we're doing premature DRY.

Yes, that makes sense to me 👍

lforst · 2023-01-11T10:56:15Z

packages/e2e-tests/test-applications/create-next-app/pages/index.tsx

@@ -0,0 +1,101 @@
+import Head from 'next/head';


Wdyt about replacing the contents of this page with the contents of client.tsx and deleting client.tsx? Just so we conform to the standard test defined in the README.

It was mainly to have separate client / server contexts, but we can discuss it when working on server-side tests. Moved to index -> a9772ae

lforst

Nice! Thank you Onur!

onurtemizkan force-pushed the onur/next-e2e-tests branch 2 times, most recently from ecc9a0b to 44a4ede Compare January 5, 2023 17:37

onurtemizkan force-pushed the onur/next-e2e-tests branch from 204d223 to 2d4d93c Compare January 10, 2023 16:54

onurtemizkan marked this pull request as ready for review January 10, 2023 17:39

lforst self-requested a review January 11, 2023 10:08

lforst reviewed Jan 11, 2023

View reviewed changes

smeubank assigned timfish and lforst Jan 12, 2023

lforst assigned onurtemizkan and unassigned timfish Jan 12, 2023

onurtemizkan added 10 commits January 12, 2023 21:04

test(nextjs): Add NextJS client-side E2E tests

fc7073d

Lint test application.

f8a8279

Strip lockfile from @sentry/... packages.

cf4719d

Remove sentry.properties file.

c2f0133

Create aliases for sentry-cli environment variables.

136d3f3

Use dryRun for e2e tests.

6220a3f

Disable debug mode.

824f6b8

Remove stylesheets and images.

7790eb3

Remove unused env variable aliases for sentry-cli.

394b73b

Move client.tsx to index.

a9772ae

onurtemizkan force-pushed the onur/next-e2e-tests branch from 693c5cf to a9772ae Compare January 12, 2023 21:05

Fix lockfile.

52812b6

lforst approved these changes Jan 13, 2023

View reviewed changes

lforst merged commit f1afb1f into master Jan 13, 2023

lforst deleted the onur/next-e2e-tests branch January 13, 2023 09:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

test(nextjs): Add NextJS client-side E2E tests #6669

test(nextjs): Add NextJS client-side E2E tests #6669

Uh oh!

onurtemizkan commented Jan 5, 2023 •

edited

Loading

Uh oh!

github-actions bot commented Jan 5, 2023 •

edited

Loading

Uh oh!

onurtemizkan commented Jan 6, 2023

Uh oh!

lforst left a comment

Uh oh!

lforst Jan 11, 2023

Uh oh!

onurtemizkan Jan 12, 2023 •

edited

Loading

Uh oh!

lforst Jan 11, 2023

Uh oh!

onurtemizkan Jan 13, 2023

Uh oh!

lforst Jan 11, 2023

Uh oh!

onurtemizkan Jan 12, 2023 •

edited

Loading

Uh oh!

lforst Jan 11, 2023

Uh oh!

onurtemizkan Jan 12, 2023

Uh oh!

lforst Jan 11, 2023

Uh oh!

onurtemizkan Jan 12, 2023 •

edited

Loading

Uh oh!

lforst left a comment

Uh oh!

Uh oh!

		@@ -0,0 +1 @@
		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

		@@ -0,0 +1,171 @@
		import { test, expect } from '@playwright/test';

Uh oh!

test(nextjs): Add NextJS client-side E2E tests #6669

test(nextjs): Add NextJS client-side E2E tests #6669

Uh oh!

Conversation

onurtemizkan commented Jan 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

onurtemizkan commented Jan 6, 2023

Uh oh!

lforst left a comment

Choose a reason for hiding this comment

Uh oh!

lforst Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

onurtemizkan Jan 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lforst Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

onurtemizkan Jan 13, 2023

Choose a reason for hiding this comment

Uh oh!

lforst Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

onurtemizkan Jan 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lforst Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

onurtemizkan Jan 12, 2023

Choose a reason for hiding this comment

Uh oh!

lforst Jan 11, 2023

Choose a reason for hiding this comment

Uh oh!

onurtemizkan Jan 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lforst left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

onurtemizkan commented Jan 5, 2023 •

edited

Loading

github-actions bot commented Jan 5, 2023 •

edited

Loading

onurtemizkan Jan 12, 2023 •

edited

Loading

onurtemizkan Jan 12, 2023 •

edited

Loading

onurtemizkan Jan 12, 2023 •

edited

Loading