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

onurtemizkan · onurtemizkan · commit bcd82bd03669 · 2022-07-22T16:51:34.000+01:00
diff --git a/.github/workflows/build.yml b/.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
diff --git a/packages/node-integration-tests/utils/index.ts b/packages/node-integration-tests/utils/index.ts
@@ -161,7 +161,7 @@ export async function runServer(testDir: string, serverPath?: string, scenarioPa
     });
 
     const server = app.listen(port, () => {
-      resolve();
+      resolve('');
       setTimeout(() => {
         server.close();
       }, 4000);
diff --git a/packages/remix/package.json b/packages/remix/package.json
@@ -60,6 +60,7 @@
     "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
     "lint:prettier": "prettier --check \"{src,test,scripts}/**/*.ts\"",
     "test": "run-s test:unit",
+    "test:integration": "cd test/integration && yarn test",
     "test:unit": "jest",
     "test:watch": "jest --watch"
   },
diff --git a/packages/remix/test/integration/.eslintrc b/packages/remix/test/integration/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]
+}
diff --git a/packages/remix/test/integration/.gitignore b/packages/remix/test/integration/.gitignore
@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env
diff --git a/packages/remix/test/integration/app/entry.client.tsx b/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);
diff --git a/packages/remix/test/integration/app/entry.server.tsx b/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,
+  });
+}
diff --git a/packages/remix/test/integration/app/root.tsx b/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);
diff --git a/packages/remix/test/integration/app/routes/index.tsx b/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>
+  );
+}
diff --git a/packages/remix/test/integration/app/routes/loader-json-response/$id.tsx b/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>
+  );
+}
diff --git a/packages/remix/test/integration/jest.config.js b/packages/remix/test/integration/jest.config.js
@@ -0,0 +1,7 @@
+const baseConfig = require('../../jest.config.js');
+
+module.exports = {
+  globalSetup: '<rootDir>/test/server/utils/run-server.ts',
+  ...baseConfig,
+  testMatch: ['**/*.test.ts'],
+};
diff --git a/packages/remix/test/integration/package.json b/packages/remix/test/integration/package.json
@@ -0,0 +1,43 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "scripts": {
+    "build": "remix build",
+    "dev": "remix dev",
+    "start": "remix-serve build",
+    "test": "yarn build && yarn test:client && yarn test:server",
+    "test:client": "echo \"TODO\"",
+    "test:server": "jest"
+  },
+  "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",
+    "@remix-run/eslint-config": "^1.6.5",
+    "@types/react": "^17.0.47",
+    "@types/react-dom": "^17.0.17",
+    "eslint": "^8.20.0",
+    "typescript": "^4.7.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"
+  }
+}
diff --git a/packages/remix/test/integration/remix.config.js b/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/',
+};
diff --git a/packages/remix/test/integration/test/server/loader.test.ts b/packages/remix/test/integration/test/server/loader.test.ts
@@ -0,0 +1,22 @@
+import { assertSentryTransaction, getEnvelopeRequest } from '../../../../../node-integration-tests/utils';
+
+describe('Remix API Loaders', () => {
+  it('correctly instruments a Remix API loader', async () => {
+    const url = 'http://localhost:3000/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',
+        },
+      ],
+    });
+  });
+});
diff --git a/packages/remix/test/integration/test/server/utils/run-server.ts b/packages/remix/test/integration/test/server/utils/run-server.ts
@@ -0,0 +1,17 @@
+import express, { Express } from 'express';
+import { createRequestHandler } from '@remix-run/express';
+
+/**
+ * Runs a test server
+ */
+function runServer(testDir: string): void {
+  const app = express();
+
+  app.all('*', createRequestHandler({ build: require('../../../build') }));
+
+  app.listen(3000);
+
+  // TODO: Finish app after tests
+}
+
+export default runServer;
diff --git a/packages/remix/test/integration/tsconfig.json b/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
+  }
+}
diff --git a/packages/remix/test/integration/tsconfig.test.json b/packages/remix/test/integration/tsconfig.test.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["suites/**/*.ts"],
+
+  "compilerOptions": {
+    // should include all types from `./tsconfig.json` plus types for all test frameworks used
+    "types": ["node", "jest"]
+
+    // other package-specific, test-specific options
+  }
+}
diff --git a/packages/remix/test/integration/yarn.lock b/packages/remix/test/integration/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": ["@remix-run/eslint-config", "@remix-run/eslint-config/node"]`
	`3`	`+}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,6 @@ @@
 +node_modules
++
 +/.cache
 +/build
 +/public/build
 +.env