test: Add Remix e2e tests with test utils.

.eslintrc.js

@@ -21,6 +21,7 @@ module.exports = {
     'scripts/**',
     'coverage/**',
     'lib/Helper/test-fixtures/**',
+    'e2e-tests/test-applications/**',
   ],
   extends: [
     'eslint:recommended',
@@ -31,6 +32,7 @@ module.exports = {
   overrides: [
     {
       files: [
+        '**/e2e-tests/utils/**/*.ts',
         '*.test.js',
         '*.test.ts',
         '**/__tests__/**/*.ts',

.github/workflows/build.yml

@@ -66,3 +66,20 @@ jobs:
         run: yarn install --frozen-lockfile
       - name: Run Unit Tests
         run: yarn test
+
+  job_e2e_test:
+    name: End-to-End Tests
+    needs: job_build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          cache: 'yarn'
+      - name: Install dependencies with yarn
+        run: yarn install --frozen-lockfile
+      - name: Run End-to-End Tests
+        run: yarn test:e2e

README.md

@@ -49,7 +49,7 @@ yarn sentry-wizard
 npx @sentry/wizard
 ```
 
-At the current moment, the wizard is meant to be used for React Native, Cordova, Electron or Next.js. If you have other platforms you would like the wizard to support, please open a [GitHub issue](https://github.com/getsentry/sentry-wizard/issues)!
+At the current moment, the wizard is meant to be used for React Native, Cordova, Electron, Next.js, Remix and Sveltekit. If you have other platforms you would like the wizard to support, please open a [GitHub issue](https://github.com/getsentry/sentry-wizard/issues)!
 
 # Options
 

bin.ts

@@ -21,79 +21,111 @@ import { run } from './src/run';
 
 export * from './lib/Setup';
 
+const PRESELECTED_PROJECT_OPTIONS = {
+  'preSelectedProject.authToken': {
+    describe: 'Preselected project auth token',
+  },
+  'preSelectedProject.selfHosted': {
+    describe: 'Preselected project is self-hosted',
+  },
+  'preSelectedProject.dsn': {
+    describe: 'Preselected project DSN',
+  },
+  'preSelectedProject.id': {
+    describe: 'Preselected project id',
+  },
+  'preSelectedProject.projectSlug': {
+    describe: 'Preselected project slug',
+  },
+  'preSelectedProject.projectName': {
+    describe: 'Preselected project name',
+  },
+  'preSelectedProject.orgId': {
+    describe: 'Preselected organization id',
+  },
+  'preSelectedProject.orgName': {
+    describe: 'Preselected organization name',
+  },
+  'preSelectedProject.orgSlug': {
+    describe: 'Preselected organization slug',
+  },
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
-const argv = yargs(hideBin(process.argv))
-  .option('debug', {
+const argv = yargs(hideBin(process.argv)).options({
+  debug: {
     default: false,
     describe: 'Enable verbose logging\nenv: SENTRY_WIZARD_DEBUG',
     type: 'boolean',
-  })
-  .option('uninstall', {
+  },
+  uninstall: {
     default: false,
     describe: 'Revert project setup process\nenv: SENTRY_WIZARD_UNINSTALL',
     type: 'boolean',
-  })
-  .option('skip-connect', {
+  },
+  'skip-connect': {
     default: false,
     describe:
       'Skips the connection to the server\nenv: SENTRY_WIZARD_SKIP_CONNECT',
     type: 'boolean',
-  })
-  .option('quiet', {
+  },
+  quiet: {
     default: false,
     describe:
       'Do not fallback to prompting user asking questions\nenv: SENTRY_WIZARD_QUIET',
     type: 'boolean',
-  })
-  .option('i', {
+  },
+  i: {
     alias: 'integration',
     choices: Object.keys(Integration),
     describe: 'Choose the integration to setup\nenv: SENTRY_WIZARD_INTEGRATION',
-  })
-  .option('p', {
+  },
+  p: {
     alias: 'platform',
     choices: Object.keys(Platform),
     describe: 'Choose platform(s)\nenv: SENTRY_WIZARD_PLATFORM',
     type: 'array',
-  })
-  .option('u', {
+  },
+  u: {
     alias: 'url',
     describe: 'The url to your Sentry installation\nenv: SENTRY_WIZARD_URL',
-  })
-  .option('project', {
+  },
+  project: {
     type: 'string',
     describe: 'The Sentry project slug to use',
     defaultDescription: 'Select project during setup',
     default: undefined,
-  })
-  .option('org', {
+  },
+  org: {
     type: 'string',
     describe: 'The Sentry org slug to use',
     defaultDescription: 'Select org during setup',
     default: undefined,
-  })
-  .option('saas', {
+  },
+  saas: {
     default: false,
     describe: 'Skip the self-hosted or SaaS URL selection process',
     defaultDescription: 'Select self-hosted or SaaS during setup',
     type: 'boolean',
-  })
-  .option('s', {
+  },
+  s: {
     alias: 'signup',
     default: false,
     describe: 'Redirect to signup page if not logged in',
     type: 'boolean',
-  })
-  .option('disable-telemetry', {
+  },
+  'disable-telemetry': {
     default: false,
     describe: "Don't send telemetry data to Sentry",
     type: 'boolean',
-  })
-  .option('promo-code', {
+  },
+  'promo-code': {
     alias: 'promo-code',
     describe: 'A promo code that will be applied during signup',
     type: 'string',
-  }).argv;
+  },
+  ...PRESELECTED_PROJECT_OPTIONS,
+}).argv;
 
 // @ts-expect-error - for some reason TS doesn't recognize the aliases as valid properties
 // meaning it only knows e.g. u but not url. Maybe a bug in this old version of yargs?

e2e-tests/jest.config.ts

@@ -0,0 +1,14 @@
+export default {
+  testTimeout: 360000,
+  testEnvironment: 'node',
+  testMatch: ['**/*.test.ts'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json',
+    },
+  },
+}

e2e-tests/test-applications/remix-test-app/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+/.cache
+/build
+.env

e2e-tests/test-applications/remix-test-app/README.md

@@ -0,0 +1,40 @@
+# Welcome to Remix!
+
+- 📖 [Remix docs](https://remix.run/docs)
+
+## Development
+
+Run the dev server:
+
+```shellscript
+npm run dev
+```
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
+
+Make sure to deploy the output of `npm run build`
+
+- `build/server`
+- `build/client`
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information.

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

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});