Skip to content

Commit 372b23f

Browse files
chargomechargome
authored
test(e2e): Add MFE e2e test using vite-plugin-federation (#19778)
Adds a barebones MFE setup that we can use for e2e testing mfe features that will come up with spans, logs, metrics Includes tests for workarounds with span mfe attribution ref #19470 Closes #19779 (added automatically)
1 parent 2ee5a96 commit 372b23f

20 files changed

Lines changed: 365 additions & 0 deletions

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
</body>
9+
</html>

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@browser-mfe-vite/mfe-header",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"build": "vite build",
8+
"preview": "vite preview --port 3032"
9+
},
10+
"dependencies": {
11+
"@sentry/browser": "latest || *",
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.3.5",
17+
"@originjs/vite-plugin-federation": "^1.3.6",
18+
"@vitejs/plugin-react": "^4.3.1",
19+
"vite": "^5.4.0"
20+
}
21+
}

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/src/App.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { useEffect } from 'react';
2+
import * as Sentry from '@sentry/browser';
3+
4+
function MfeHeader() {
5+
useEffect(() => {
6+
Sentry.withScope(scope => {
7+
scope.setTag('mfe.name', 'mfe-header');
8+
fetch('http://localhost:6969/api/header-data');
9+
});
10+
}, []);
11+
12+
return <div id="mfe-header">Header MFE</div>;
13+
}
14+
15+
export default MfeHeader;

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-header/vite.config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
import federation from '@originjs/vite-plugin-federation';
4+
5+
export default defineConfig({
6+
plugins: [
7+
react(),
8+
federation({
9+
name: 'mfe_header',
10+
filename: 'remoteEntry.js',
11+
exposes: { './App': './src/App.tsx' },
12+
shared: ['react', 'react-dom'],
13+
}),
14+
],
15+
build: {
16+
target: 'esnext',
17+
minify: false,
18+
},
19+
preview: { port: 3032 },
20+
});

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
</body>
9+
</html>

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "@browser-mfe-vite/mfe-one",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"build": "vite build",
8+
"preview": "vite preview --port 3033"
9+
},
10+
"dependencies": {
11+
"@sentry/browser": "latest || *",
12+
"react": "^18.3.1",
13+
"react-dom": "^18.3.1"
14+
},
15+
"devDependencies": {
16+
"@types/react": "^18.3.5",
17+
"@originjs/vite-plugin-federation": "^1.3.6",
18+
"@vitejs/plugin-react": "^4.3.1",
19+
"vite": "^5.4.0"
20+
}
21+
}

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/src/App.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React, { useEffect } from 'react';
2+
import * as Sentry from '@sentry/browser';
3+
4+
function MfeOne() {
5+
useEffect(() => {
6+
Sentry.withScope(scope => {
7+
scope.setTag('mfe.name', 'mfe-one');
8+
fetch('http://localhost:6969/api/mfe-one-data');
9+
});
10+
}, []);
11+
12+
return <div id="mfe-one">MFE One</div>;
13+
}
14+
15+
export default MfeOne;

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/mfe-one/vite.config.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { defineConfig } from 'vite';
2+
import react from '@vitejs/plugin-react';
3+
import federation from '@originjs/vite-plugin-federation';
4+
5+
export default defineConfig({
6+
plugins: [
7+
react(),
8+
federation({
9+
name: 'mfe_one',
10+
filename: 'remoteEntry.js',
11+
exposes: { './App': './src/App.tsx' },
12+
shared: ['react', 'react-dom'],
13+
}),
14+
],
15+
build: {
16+
target: 'esnext',
17+
minify: false,
18+
},
19+
preview: { port: 3033 },
20+
});

‎dev-packages/e2e-tests/test-applications/browser-mfe-vite/apps/shell/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MFE Shell</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

0 commit comments

Comments
 (0)