Skip to content

Commit 0c19446

Browse files
authored
test(remix): Add Remix v2 future flags integration tests. (#8397)
Added an integration test application using [Remix 1.17.0](https://github.com/remix-run/remix/releases/tag/remix%401.17.0) and [v2 future flags](https://remix.run/docs/en/main/pages/api-development-strategy) to see the state of current SDK support for v2.
1 parent 947db1b commit 0c19446

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+220
-40
lines changed

.github/workflows/build.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -685,7 +685,7 @@ jobs:
685685
yarn test
686686
687687
job_remix_integration_tests:
688-
name: Remix (Node ${{ matrix.node }}) Tests
688+
name: Remix v${{ matrix.remix }} (Node ${{ matrix.node }}) Tests
689689
needs: [job_get_metadata, job_build]
690690
if: needs.job_get_metadata.outputs.changed_remix == 'true' || github.event_name != 'pull_request'
691691
runs-on: ubuntu-20.04
@@ -694,6 +694,7 @@ jobs:
694694
fail-fast: false
695695
matrix:
696696
node: [14, 16, 18]
697+
remix: [1, 2]
697698
steps:
698699
- name: Check out current commit (${{ needs.job_get_metadata.outputs.commit_label }})
699700
uses: actions/checkout@v3
@@ -710,6 +711,7 @@ jobs:
710711
- name: Run integration tests
711712
env:
712713
NODE_VERSION: ${{ matrix.node }}
714+
REMIX_VERSION: ${{ matrix.remix }}
713715
run: |
714716
cd packages/remix
715717
yarn test:integration:ci

packages/remix/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,9 @@
5959
"lint:eslint": "eslint . --format stylish",
6060
"lint:prettier": "prettier --check \"{src,test,scripts}/**/**.ts\"",
6161
"test": "yarn test:unit",
62-
"test:integration": "run-s test:integration:clean test:integration:prepare test:integration:client test:integration:server",
62+
"test:integration": "run-s test:integration:v1 test:integration:v2",
63+
"test:integration:v1": "run-s test:integration:clean test:integration:prepare test:integration:client test:integration:server",
64+
"test:integration:v2": "export REMIX_VERSION=2 && run-s test:integration:v1",
6365
"test:integration:ci": "run-s test:integration:clean test:integration:prepare test:integration:client:ci test:integration:server",
6466
"test:integration:prepare": "(cd test/integration && yarn)",
6567
"test:integration:clean": "(cd test/integration && rimraf .cache node_modules build)",
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/action-json-response.$id';
2+
export { default } from '../../../common/routes/action-json-response.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/capture-exception';
2+
export { default } from '../../common/routes/capture-exception';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/capture-message';
2+
export { default } from '../../common/routes/capture-message';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/error-boundary-capture.$id';
2+
export { default } from '../../../common/routes/error-boundary-capture.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/index';
2+
export { default } from '../../common/routes/index';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/loader-defer-response';
2+
export { default } from '../../../common/routes/loader-defer-response';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/loader-json-response.$id';
2+
export { default } from '../../../common/routes/loader-json-response.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/manual-tracing.$id';
2+
export { default } from '../../../common/routes/manual-tracing.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../../common/routes/scope-bleed.$id';
2+
export { default } from '../../../common/routes/scope-bleed.$id';
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { RemixBrowser, useLocation, useMatches } from '@remix-run/react';
2+
import { hydrate } from 'react-dom';
3+
import * as Sentry from '@sentry/remix';
4+
import { useEffect } from 'react';
5+
6+
Sentry.init({
7+
dsn: 'https://[email protected]/1337',
8+
tracesSampleRate: 1,
9+
integrations: [
10+
new Sentry.BrowserTracing({
11+
routingInstrumentation: Sentry.remixRouterInstrumentation(useEffect, useLocation, useMatches),
12+
}),
13+
],
14+
});
15+
16+
hydrate(<RemixBrowser />, document);
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { EntryContext } from '@remix-run/node';
2+
import { RemixServer } from '@remix-run/react';
3+
import { renderToString } from 'react-dom/server';
4+
import * as Sentry from '@sentry/remix';
5+
6+
Sentry.init({
7+
dsn: 'https://[email protected]/1337',
8+
tracesSampleRate: 1,
9+
// Disabling to test series of envelopes deterministically.
10+
autoSessionTracking: false,
11+
});
12+
13+
export default function handleRequest(
14+
request: Request,
15+
responseStatusCode: number,
16+
responseHeaders: Headers,
17+
remixContext: EntryContext,
18+
) {
19+
let markup = renderToString(<RemixServer context={remixContext} url={request.url} />);
20+
21+
responseHeaders.set('Content-Type', 'text/html');
22+
23+
return new Response('<!DOCTYPE html>' + markup, {
24+
status: responseStatusCode,
25+
headers: responseHeaders,
26+
});
27+
}
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { V2_MetaFunction, LoaderFunction, json, defer, redirect } from '@remix-run/node';
2+
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
3+
import { withSentry } from '@sentry/remix';
4+
5+
export const meta: V2_MetaFunction = ({ data }) => [
6+
{ charset: 'utf-8' },
7+
{ title: 'New Remix App' },
8+
{ name: 'viewport', content: 'width=device-width,initial-scale=1' },
9+
{ name: 'sentry-trace', content: data.sentryTrace },
10+
{ name: 'baggage', content: data.sentryBaggage },
11+
];
12+
13+
export const loader: LoaderFunction = async ({ request }) => {
14+
const url = new URL(request.url);
15+
const type = url.searchParams.get('type');
16+
17+
switch (type) {
18+
case 'empty':
19+
return {};
20+
case 'plain':
21+
return {
22+
data_one: [],
23+
data_two: 'a string',
24+
};
25+
case 'json':
26+
return json({ data_one: [], data_two: 'a string' }, { headers: { 'Cache-Control': 'max-age=300' } });
27+
case 'defer':
28+
return defer({ data_one: [], data_two: 'a string' });
29+
case 'null':
30+
return null;
31+
case 'undefined':
32+
return undefined;
33+
case 'throwRedirect':
34+
throw redirect('/?type=plain');
35+
case 'returnRedirect':
36+
return redirect('/?type=plain');
37+
default: {
38+
return {};
39+
}
40+
}
41+
};
42+
43+
function App() {
44+
return (
45+
<html lang="en">
46+
<head>
47+
<Meta />
48+
<Links />
49+
</head>
50+
<body>
51+
<Outlet />
52+
<ScrollRestoration />
53+
<Scripts />
54+
<LiveReload />
55+
</body>
56+
</html>
57+
);
58+
}
59+
60+
export default withSentry(App);
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/action-json-response.$id';
2+
export { default } from '../../common/routes/action-json-response.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/capture-exception';
2+
export { default } from '../../common/routes/capture-exception';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/capture-message';
2+
export { default } from '../../common/routes/capture-message';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/error-boundary-capture.$id';
2+
export { default } from '../../common/routes/error-boundary-capture.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/index';
2+
export { default } from '../../common/routes/index';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/loader-defer-response';
2+
export { default } from '../../common/routes/loader-defer-response';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/loader-json-response.$id';
2+
export { default } from '../../common/routes/loader-json-response.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/manual-tracing.$id';
2+
export { default } from '../../common/routes/manual-tracing.$id';
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from '../../common/routes/scope-bleed.$id';
2+
export { default } from '../../common/routes/scope-bleed.$id';

packages/remix/test/integration/app/routes/capture-message.tsx renamed to packages/remix/test/integration/common/routes/capture-message.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import * as Sentry from '@sentry/remix';
33
export default function ErrorBoundaryCapture() {
44
Sentry.captureMessage('Sentry Manually Captured Message');
55

6-
return <div/>;
6+
return <div />;
77
}

packages/remix/test/integration/app/routes/manual-tracing/$id.tsx renamed to packages/remix/test/integration/common/routes/manual-tracing.$id.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@ import * as Sentry from '@sentry/remix';
33
export default function ManualTracing() {
44
const transaction = Sentry.startTransaction({ name: 'test_transaction_1' });
55
transaction.finish();
6-
return <div/>;
6+
return <div />;
77
}
Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
/** @type {import('@remix-run/dev').AppConfig} */
2+
const useV2 = process.env.REMIX_VERSION === '2';
3+
24
module.exports = {
3-
appDirectory: 'app',
5+
appDirectory: useV2 ? 'app_v2' : 'app_v1',
46
assetsBuildDirectory: 'public/build',
57
serverBuildPath: 'build/index.js',
68
publicPath: '/build/',
9+
future: {
10+
v2_errorBoundary: useV2,
11+
v2_headers: useV2,
12+
v2_meta: useV2,
13+
v2_normalizeFormMethod: useV2,
14+
v2_routeConvention: useV2,
15+
},
716
};

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
22
import { test, expect } from '@playwright/test';
33
import { Event } from '@sentry/types';
44

5+
const useV2 = process.env.REMIX_VERSION === '2';
6+
57
test('should capture React component errors.', async ({ page }) => {
68
const envelopes = await getMultipleSentryEnvelopeRequests<Event>(page, 2, {
79
url: '/error-boundary-capture/0',
@@ -12,7 +14,9 @@ test('should capture React component errors.', async ({ page }) => {
1214
expect(pageloadEnvelope.contexts?.trace.op).toBe('pageload');
1315
expect(pageloadEnvelope.tags?.['routing.instrumentation']).toBe('remix-router');
1416
expect(pageloadEnvelope.type).toBe('transaction');
15-
expect(pageloadEnvelope.transaction).toBe('routes/error-boundary-capture/$id');
17+
expect(pageloadEnvelope.transaction).toBe(
18+
useV2 ? 'routes/error-boundary-capture.$id' : 'routes/error-boundary-capture/$id',
19+
);
1620

1721
expect(errorEnvelope.level).toBe('error');
1822
expect(errorEnvelope.sdk?.name).toBe('sentry.javascript.remix');

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { getMultipleSentryEnvelopeRequests } from './utils/helpers';
22
import { test, expect } from '@playwright/test';
33
import { Event } from '@sentry/types';
44

5+
const useV2 = process.env.REMIX_VERSION === '2';
6+
57
test('should report a manually created / finished transaction.', async ({ page }) => {
68
const envelopes = await getMultipleSentryEnvelopeRequests<Event>(page, 2, {
79
url: '/manual-tracing/0',
@@ -17,5 +19,5 @@ test('should report a manually created / finished transaction.', async ({ page }
1719
expect(pageloadEnvelope.contexts?.trace?.op).toBe('pageload');
1820
expect(pageloadEnvelope.tags?.['routing.instrumentation']).toBe('remix-router');
1921
expect(pageloadEnvelope.type).toBe('transaction');
20-
expect(pageloadEnvelope.transaction).toBe('routes/manual-tracing/$id');
22+
expect(pageloadEnvelope.transaction).toBe(useV2 ? 'routes/manual-tracing.$id' : 'routes/manual-tracing/$id');
2123
});

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const useV2 = process.env.REMIX_VERSION === '2';
2+
13
import { getFirstSentryEnvelopeRequest } from './utils/helpers';
24
import { test, expect } from '@playwright/test';
35
import { Event } from '@sentry/types';
@@ -8,5 +10,6 @@ test('should add `pageload` transaction on load.', async ({ page }) => {
810
expect(envelope.contexts?.trace.op).toBe('pageload');
911
expect(envelope.tags?.['routing.instrumentation']).toBe('remix-router');
1012
expect(envelope.type).toBe('transaction');
11-
expect(envelope.transaction).toBe('routes/index');
13+
14+
expect(envelope.transaction).toBe(useV2 ? 'root' : 'routes/index');
1215
});

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

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { assertSentryTransaction, assertSentryEvent, RemixTestEnv } from './utils/helpers';
22

3+
const useV2 = process.env.REMIX_VERSION === '2';
4+
35
jest.spyOn(console, 'error').mockImplementation();
46

57
// Repeat tests for each adapter
@@ -11,22 +13,22 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
1113
const transaction = envelope[2];
1214

1315
assertSentryTransaction(transaction, {
14-
transaction: 'routes/action-json-response/$id',
16+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
1517
spans: [
1618
{
17-
description: 'routes/action-json-response/$id',
19+
description: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
1820
op: 'function.remix.action',
1921
},
2022
{
2123
description: 'root',
2224
op: 'function.remix.loader',
2325
},
2426
{
25-
description: 'routes/action-json-response/$id',
27+
description: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
2628
op: 'function.remix.loader',
2729
},
2830
{
29-
description: 'routes/action-json-response/$id',
31+
description: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
3032
op: 'function.remix.document_request',
3133
},
3234
],
@@ -102,7 +104,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
102104
const [event] = envelopes.filter(envelope => envelope[1].type === 'event');
103105

104106
assertSentryTransaction(transaction[2], {
105-
transaction: 'routes/action-json-response/$id',
107+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
106108
request: {
107109
method: 'POST',
108110
url,
@@ -161,7 +163,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
161163
},
162164
},
163165
tags: {
164-
transaction: 'routes/action-json-response/$id',
166+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
165167
},
166168
});
167169

@@ -177,7 +179,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
177179
},
178180
},
179181
tags: {
180-
transaction: 'routes/action-json-response/$id',
182+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
181183
},
182184
});
183185

@@ -227,7 +229,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
227229
},
228230
},
229231
tags: {
230-
transaction: 'routes/action-json-response/$id',
232+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
231233
},
232234
});
233235

@@ -277,7 +279,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
277279
},
278280
},
279281
tags: {
280-
transaction: 'routes/action-json-response/$id',
282+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
281283
},
282284
});
283285

@@ -327,7 +329,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
327329
},
328330
},
329331
tags: {
330-
transaction: 'routes/action-json-response/$id',
332+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
331333
},
332334
});
333335

@@ -377,7 +379,7 @@ describe.each(['builtin', 'express'])('Remix API Actions with adapter = %s', ada
377379
},
378380
},
379381
tags: {
380-
transaction: 'routes/action-json-response/$id',
382+
transaction: `routes/action-json-response${useV2 ? '.' : '/'}$id`,
381383
},
382384
});
383385

0 commit comments

Comments
 (0)