test: Re-enable Remix client-side e2e tests (#10290)

Co-authored-by: Luca Forstner <[email protected]>

Author: onurtemizkan

.github/workflows/build.yml

@@ -1042,9 +1042,8 @@ jobs:
             'node-express-app',
             'create-react-app',
             'create-next-app',
-            # disabling remix e2e tests because of flakes
-            # 'create-remix-app',
-            # 'create-remix-app-v2',
+            'create-remix-app',
+            'create-remix-app-v2',
             'debug-id-sourcemaps',
             'nextjs-app-dir',
             'nextjs-14',

dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.client.tsx

@@ -10,6 +10,7 @@ import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: window.ENV.SENTRY_DSN,
   integrations: [
     new Sentry.BrowserTracing({

dev-packages/e2e-tests/test-applications/create-remix-app-v2/app/entry.server.tsx

@@ -19,6 +19,7 @@ installGlobals();
 const ABORT_DELAY = 5_000;
 
 Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.E2E_TEST_DSN,
   // Performance Monitoring
   tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!

dev-packages/e2e-tests/test-applications/create-remix-app-v2/remix.config.js

@@ -6,5 +6,4 @@ module.exports = {
   // serverBuildPath: 'build/index.js',
   // publicPath: '/build/',
   serverModuleFormat: 'cjs',
-  entry,
 };

dev-packages/e2e-tests/test-applications/create-remix-app-v2/tests/behaviour-client.test.ts

@@ -47,8 +47,7 @@ test('Sends a client-side exception to Sentry', async ({ page }) => {
     .toBe(200);
 });
 
-// Skipping test because of flake
-test.skip('Sends a pageload transaction to Sentry', async ({ page }) => {
+test('Sends a pageload transaction to Sentry', async ({ page }) => {
   await page.goto('/');
 
   const recordedTransactionsHandle = await page.waitForFunction(() => {
@@ -107,8 +106,7 @@ test.skip('Sends a pageload transaction to Sentry', async ({ page }) => {
   expect(hadPageLoadTransaction).toBe(true);
 });
 
-// Skipped because of test flake
-test.skip('Sends a navigation transaction to Sentry', async ({ page }) => {
+test('Sends a navigation transaction to Sentry', async ({ page }) => {
   await page.goto('/');
 
   // Give pageload transaction time to finish

dev-packages/e2e-tests/test-applications/create-remix-app/app/entry.client.tsx

@@ -10,6 +10,7 @@ import { StrictMode, startTransition, useEffect } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 
 Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: window.ENV.SENTRY_DSN,
   integrations: [
     new Sentry.BrowserTracing({

dev-packages/e2e-tests/test-applications/create-remix-app/app/entry.server.tsx

@@ -16,6 +16,7 @@ import { renderToPipeableStream } from 'react-dom/server';
 const ABORT_DELAY = 5_000;
 
 Sentry.init({
+  environment: 'qa', // dynamic sampling bias to keep transactions
   dsn: process.env.E2E_TEST_DSN,
   // Performance Monitoring
   tracesSampleRate: 1.0, // Capture 100% of the transactions, reduce in production!

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

@@ -7,8 +7,7 @@ const authToken = process.env.E2E_TEST_AUTH_TOKEN;
 const sentryTestOrgSlug = process.env.E2E_TEST_SENTRY_ORG_SLUG;
 const sentryTestProject = process.env.E2E_TEST_SENTRY_TEST_PROJECT;
 
-// skipping flaky test
-test.skip('Sends a client-side exception to Sentry', async ({ page }) => {
+test('Sends a client-side exception to Sentry', async ({ page }) => {
   await page.goto('/');
 
   const exceptionButton = page.locator('id=exception-button');
@@ -48,8 +47,7 @@ test.skip('Sends a client-side exception to Sentry', async ({ page }) => {
     .toBe(200);
 });
 
-// skipping flaky test
-test.skip('Sends a pageload transaction to Sentry', async ({ page }) => {
+test('Sends a pageload transaction to Sentry', async ({ page }) => {
   await page.goto('/');
 
   const recordedTransactionsHandle = await page.waitForFunction(() => {