test(remix): Add a boilerplate for Remix SDK integration tests. (#5453)

Adds an integration testing boilerplate for Remix SDK and sample tests for client and server.

As the line between client and server is blurred in Remix sources, all scenarios are defined in a common Remix application, but tested separately for `client` and `server`.

The server side tests uses the utilities we have already implemented for [`node-integration-tests`](https://github.com/getsentry/sentry-javascript/tree/master/packages/node-integration-tests). Needs some extra features though, such as triggering `post` requests to test `action` functions.

The client side tests uses the helper utilities from our Playwright browser tests, did not need to implement `fixtures` or anything, as it seems these tests will be fairly simple.

Author: onurtemizkan

.github/workflows/build.yml

@@ -571,3 +571,38 @@ jobs:
         run: |
           cd packages/node-integration-tests
           yarn test
+
+  job_remix_integration_tests:
+    name: Remix SDK Integration Tests (${{ matrix.node }})
+    needs: [job_get_metadata, job_build]
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    continue-on-error: true
+    strategy:
+      matrix:
+        node: [14, 16, 18]
+    steps:
+      - name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ env.HEAD_COMMIT }}
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Check dependency cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.CACHED_DEPENDENCY_PATHS }}
+          key: ${{ needs.job_build.outputs.dependency_cache_key }}
+      - name: Check build cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ env.CACHED_BUILD_PATHS }}
+          key: ${{ env.BUILD_CACHE_KEY }}
+      - name: Run integration tests
+        env:
+          NODE_VERSION: ${{ matrix.node }}
+        run: |
+          cd packages/remix
+          yarn test:integration:ci

packages/remix/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   parserOptions: {
     jsx: true,
   },
+  ignorePatterns: ['playwright.config.ts', 'test/integration/**'],
   extends: ['../../.eslintrc.js'],
   rules: {
     '@sentry-internal/sdk/no-async-await': 'off',

packages/remix/jest.config.js

@@ -1 +1,6 @@
-module.exports = require('../../jest/jest.config.js');
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testPathIgnorePatterns: ['<rootDir>/build/', '<rootDir>/node_modules/', '<rootDir>/test/integration/'],
+};

packages/remix/package.json

@@ -60,6 +60,12 @@
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/*.ts\"",
     "test": "run-s test:unit",
+    "test:integration": "run-s test:integration:prepare test:integration:client test:integration:server",
+    "test:integration:ci": "run-s test:integration:prepare test:integration:client:ci test:integration:server",
+    "test:integration:prepare": "(cd test/integration && yarn)",
+    "test:integration:client": "yarn playwright install-deps && yarn playwright test test/integration/test/client/",
+    "test:integration:client:ci": "yarn test:integration:client --browser='all' --reporter='line'",
+    "test:integration:server": "jest --config=test/integration/jest.config.js test/integration/test/server/",
     "test:unit": "jest",
     "test:watch": "jest --watch"
   },

packages/remix/playwright.config.ts

@@ -0,0 +1,16 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  retries: 2,
+  timeout: 12000,
+  use: {
+    baseURL: 'http://localhost:3000',
+  },
+  workers: 3,
+  webServer: {
+    command: '(cd test/integration/ && yarn build && yarn start)',
+    port: 3000,
+  },
+};
+
+export default config;

packages/remix/test/integration/.gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/
+yarn.lock

packages/remix/test/integration/app/entry.client.tsx

@@ -0,0 +1,16 @@
+import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
+import { hydrate } from 'react-dom';
+import * as Sentry from '@sentry/remix';
+import { useEffect } from 'react';
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+  integrations: [
+    new Sentry.BrowserTracing({
+      routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches),
+    }),
+  ],
+});
+
+hydrate(<RemixBrowser />, document);

packages/remix/test/integration/app/entry.server.tsx

@@ -0,0 +1,25 @@
+import type { EntryContext } from '@remix-run/node';
+import { RemixServer } from '@remix-run/react';
+import { renderToString } from 'react-dom/server';
+import * as Sentry from '@sentry/remix';
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  tracesSampleRate: 1,
+});
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext,
+) {
+  let markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
+
+  responseHeaders.set('Content-Type', 'text/html');
+
+  return new Response('<!DOCTYPE html>' + markup, {
+    status: responseStatusCode,
+    headers: responseHeaders,
+  });
+}

packages/remix/test/integration/app/root.tsx

@@ -0,0 +1,28 @@
+import type { MetaFunction } from '@remix-run/node';
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
+import { withSentry } from '@sentry/remix';
+
+export const meta: MetaFunction = () => ({
+  charset: 'utf-8',
+  title: 'New Remix App',
+  viewport: 'width=device-width,initial-scale=1',
+});
+
+function App() {
+  return (
+    <html lang="en">
+      <head>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+
+export default withSentry(App);

packages/remix/test/integration/app/routes/index.tsx

@@ -0,0 +1,7 @@
+export default function Index() {
+  return (
+    <div>
+      <h1>Remix Integration Tests Home</h1>
+    </div>
+  );
+}