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://[email protected]/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://[email protected]/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>
+  );
+}

packages/remix/test/integration/app/routes/loader-json-response/$id.tsx

@@ -0,0 +1,20 @@
+import { json, LoaderFunction } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+
+type LoaderData = { id: string };
+
+export const loader: LoaderFunction = async ({ params: { id } }) => {
+  return json({
+    id,
+  });
+};
+
+export default function LoaderJSONResponse() {
+  const data = useLoaderData<LoaderData>();
+
+  return (
+    <div>
+      <h1>{data.id}</h1>
+    </div>
+  );
+}

packages/remix/test/integration/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require('../../jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testMatch: [`${__dirname}/test/server/**/*.test.ts`],
+  testPathIgnorePatterns: [`${__dirname}/test/client`],
+  detectOpenHandles: true,
+  forceExit: true,
+};

packages/remix/test/integration/package.json

@@ -0,0 +1,38 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build"
+  },
+  "dependencies": {
+    "@remix-run/express": "^1.6.5",
+    "@remix-run/node": "^1.6.5",
+    "@remix-run/react": "^1.6.5",
+    "@remix-run/serve": "^1.6.5",
+    "@sentry/remix": "file:../..",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^1.6.5",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17",
+    "typescript": "^4.2.4"
+  },
+  "resolutions": {
+    "@sentry/browser": "file:../../../browser",
+    "@sentry/core": "file:../../../core",
+    "@sentry/hub": "file:../../../hub",
+    "@sentry/integrations": "file:../../../integrations",
+    "@sentry/node": "file:../../../node",
+    "@sentry/react": "file:../../../react",
+    "@sentry/tracing": "file:../../../tracing",
+    "@sentry/types": "file:../../../types",
+    "@sentry/utils": "file:../../../utils"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}

packages/remix/test/integration/remix.config.js

@@ -0,0 +1,7 @@
+/** @type {import('@remix-run/dev').AppConfig} */
+module.exports = {
+  appDirectory: 'app',
+  assetsBuildDirectory: 'public/build',
+  serverBuildPath: 'build/index.js',
+  publicPath: '/build/',
+};

packages/remix/test/integration/test/client/pageload.test.ts

@@ -0,0 +1,12 @@
+import { getFirstSentryEnvelopeRequest } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+test('should add `pageload` transaction on load.', async ({ page }) => {
+  const envelope = await getFirstSentryEnvelopeRequest<Event>(page, '/');
+
+  expect(envelope.contexts?.trace.op).toBe('pageload');
+  expect(envelope.tags?.['routing.instrumentation']).toBe('remix-router');
+  expect(envelope.type).toBe('transaction');
+  expect(envelope.transaction).toBe('routes/index');
+});

packages/remix/test/integration/test/client/utils/helpers.ts

@@ -0,0 +1 @@
+export * from '../../../../../../integration-tests/utils/helpers';

packages/remix/test/integration/test/server/loader.test.ts

@@ -0,0 +1,23 @@
+import { assertSentryTransaction, getEnvelopeRequest, runServer } from './utils/helpers';
+
+describe('Remix API Loaders', () => {
+  it('correctly instruments a Remix API loader', async () => {
+    const baseURL = await runServer();
+    const url = `${baseURL}/loader-json-response/123123`;
+    const envelope = await getEnvelopeRequest(url);
+    const transaction = envelope[2];
+
+    assertSentryTransaction(transaction, {
+      spans: [
+        {
+          description: url,
+          op: 'remix.server.loader',
+        },
+        {
+          description: url,
+          op: 'remix.server.documentRequest',
+        },
+      ],
+    });
+  });
+});

packages/remix/test/integration/test/server/utils/helpers.ts

@@ -0,0 +1,24 @@
+import express from 'express';
+import { createRequestHandler } from '@remix-run/express';
+import { getPortPromise } from 'portfinder';
+
+export * from '../../../../../../node-integration-tests/utils';
+
+/**
+ * Runs a test server
+ * @returns URL
+ */
+export async function runServer(): Promise<string> {
+  const app = express();
+  const port = await getPortPromise();
+
+  app.all('*', createRequestHandler({ build: require('../../../build') }));
+
+  const server = app.listen(port, () => {
+    setTimeout(() => {
+      server.close();
+    }, 4000);
+  });
+
+  return `http://localhost:${port}`;
+}

packages/remix/test/integration/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "target": "ES2019",
+    "strict": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "noEmit": true
+  }
+}

packages/remix/test/integration/tsconfig.test.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*"],
+
+  "compilerOptions": {
+    "types": ["node", "jest"]
+  }
+}

packages/remix/tsconfig.test.json

@@ -4,6 +4,7 @@
   "include": ["test/**/*"],
 
   "compilerOptions": {
-    "types": ["node", "jest"]
+    "types": ["node", "jest"],
+    "esModuleInterop": true
   }
 }