test(integration): cover host build, CSS & shared deps

Author: joshuaellis

integration/build.test.ts

@@ -1,71 +1,39 @@
-import defu from 'defu';
 import { resolve } from 'path';
-import { build, Rollup } from 'vite';
 import { describe, expect, it } from 'vitest';
-import { federation } from '../src/index';
-import { findAsset, findChunk, getChunkNames } from './helpers/matchers';
+import { buildFixture, FIXTURES } from './helpers/build';
+import { findAsset, findChunk, getAllChunkCode, getChunkNames } from './helpers/matchers';
 
-const FIXTURES = resolve(__dirname, 'fixtures');
-const BASIC_REMOTE = resolve(FIXTURES, 'basic-remote');
-
-async function buildFixture(optionsOverrides?: Partial<Parameters<typeof federation>[0]>) {
-  const defaultOptions = {
-    name: 'basicRemote',
-    filename: 'remoteEntry.js',
-    exposes: {
-      './exposed': resolve(BASIC_REMOTE, 'exposed-module.js'),
-    },
-    shared: {},
-    dts: false,
-  } satisfies Parameters<typeof federation>[0];
-
-  const mfOptions = defu(defaultOptions, optionsOverrides);
-
-  const result = await build({
-    root: BASIC_REMOTE,
-    logLevel: 'silent',
-    plugins: [federation(mfOptions)],
-    build: {
-      write: false,
-      target: 'chrome89',
-    },
-  });
-
-  // Vite returns RollupOutput[] only with multiple rollupOptions.output entries.
-  // Our test configs should never produce that — fail fast if they do.
-  expect(Array.isArray(result), 'E  xpected a single RollupOutput, not an array').toBe(false);
-  return result as Rollup.RollupOutput;
-}
+const BASIC_REMOTE_MF_OPTIONS = {
+  exposes: {
+    './exposed': resolve(FIXTURES, 'basic-remote', 'exposed-module.js'),
+  },
+};
 
 describe('build', () => {
   describe('remote', () => {
     it('produces a remoteEntry chunk', async () => {
-      const output = await buildFixture();
+      const output = await buildFixture({ mfOptions: BASIC_REMOTE_MF_OPTIONS });
       const chunks = getChunkNames(output);
       expect(chunks.some((name) => name.includes('remoteEntry'))).toBe(true);
     });
 
     it('remoteEntry contains federation runtime init with correct name', async () => {
-      const output = await buildFixture();
+      const output = await buildFixture({ mfOptions: BASIC_REMOTE_MF_OPTIONS });
       const remoteEntry = findChunk(output, 'remoteEntry');
       expect(remoteEntry).toBeDefined();
       expect(remoteEntry!.code).toContain('basicRemote');
       expect(remoteEntry!.code).toContain('moduleCache');
     });
 
     it('exposed module content is included in output', async () => {
-      const output = await buildFixture();
-      const allCode = output.output
-        .filter((o): o is Rollup.OutputChunk => o.type === 'chunk')
-        .map((c) => c.code)
-        .join('\n');
-
+      const output = await buildFixture({ mfOptions: BASIC_REMOTE_MF_OPTIONS });
+      const allCode = getAllChunkCode(output);
       expect(allCode).toContain('Hello');
     });
 
     it('generates mf-manifest.json when manifest is enabled', async () => {
       const manifestOutput = await buildFixture({
-        manifest: true,
+        mfOptions: { ...BASIC_REMOTE_MF_OPTIONS, manifest: true },
       });
 
       const manifest = findAsset(manifestOutput, 'mf-manifest.json');

integration/css-manifest.test.ts

@@ -0,0 +1,73 @@
+import { resolve } from 'path';
+import { describe, expect, it } from 'vitest';
+import type { ModuleFederationOptions } from '../src/utils/normalizeModuleFederationOptions';
+import { buildFixture, FIXTURES } from './helpers/build';
+import { parseManifest } from './helpers/matchers';
+
+const CSS_BASE_MF_OPTIONS = {
+  name: 'cssRemote',
+  filename: 'remoteEntry.js',
+  exposes: {
+    './widget': resolve(FIXTURES, 'css-remote', 'exposed-module.js'),
+  },
+  manifest: true,
+  dts: false,
+} satisfies Partial<ModuleFederationOptions>;
+
+interface ManifestExpose {
+  id: string;
+  name: string;
+  path: string;
+  assets: {
+    js: { sync: string[]; async: string[] };
+    css: { sync: string[]; async: string[] };
+  };
+}
+
+describe('css manifest', () => {
+  it('tracks CSS and JS assets under the correct expose', async () => {
+    const output = await buildFixture({
+      fixture: 'css-remote',
+      mfOptions: CSS_BASE_MF_OPTIONS,
+    });
+    const manifest = parseManifest(output) as Record<string, unknown>;
+    expect(manifest).toBeDefined();
+    expect(manifest).toHaveProperty('exposes');
+
+    const exposes = manifest.exposes as ManifestExpose[];
+    const widget = exposes.find((e) => e.name === 'widget');
+    expect(widget).toBeDefined();
+
+    const allCssFiles = [...widget!.assets.css.sync, ...widget!.assets.css.async];
+    expect(allCssFiles.length).toBeGreaterThanOrEqual(1);
+    for (const file of allCssFiles) {
+      expect(file).toMatch(/\.css$/);
+    }
+
+    const allJsFiles = [...widget!.assets.js.sync, ...widget!.assets.js.async];
+    expect(allJsFiles.length).toBeGreaterThanOrEqual(1);
+    for (const file of allJsFiles) {
+      expect(file).toMatch(/\.js$/);
+    }
+  });
+
+  it('adds CSS to all exposes when bundleAllCSS is enabled', async () => {
+    const output = await buildFixture({
+      fixture: 'css-remote',
+      mfOptions: { ...CSS_BASE_MF_OPTIONS, bundleAllCSS: true },
+    });
+    const manifest = parseManifest(output) as Record<string, unknown>;
+    expect(manifest).toBeDefined();
+
+    const exposes = manifest.exposes as ManifestExpose[];
+    expect(exposes.length).toBeGreaterThanOrEqual(1);
+
+    for (const expose of exposes) {
+      const cssCount = expose.assets.css.sync.length + expose.assets.css.async.length;
+      expect(
+        cssCount,
+        `expose "${expose.name}" should have at least one CSS asset`
+      ).toBeGreaterThanOrEqual(1);
+    }
+  });
+});

integration/fixtures/basic-host/entry.js

@@ -0,0 +1,2 @@
+const mod = import('remote1/Module');
+mod.then((m) => console.log(m));

integration/fixtures/basic-host/index.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./entry.js"></script>
+  </body>
+</html>

integration/fixtures/css-remote/entry.js

@@ -0,0 +1 @@
+console.log('css remote entry');

integration/fixtures/css-remote/exposed-module.js

@@ -0,0 +1,5 @@
+import './styles.css';
+
+export function Widget() {
+  return '<div class="widget">Widget</div>';
+}

integration/fixtures/css-remote/index.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./entry.js"></script>
+  </body>
+</html>

integration/fixtures/css-remote/styles.css

@@ -0,0 +1,4 @@
+.widget {
+  color: red;
+  padding: 8px;
+}

integration/fixtures/shared-remote/entry.js

@@ -0,0 +1 @@
+console.log('shared remote entry');

integration/fixtures/shared-remote/exposed-module.js

@@ -0,0 +1,5 @@
+import defu from 'defu';
+
+export function merge(a, b) {
+  return defu(a, b);
+}