Vitest runner can't load remoteEntry.js file of the remote modules configured with module federation plugin

Question

I have created a react app with vite where I am combining two micro-frontends. in the host app I have configured module federation vite plugin which defines remote entry for the exposed ui second micro-frontend. Something similar to this:

export default defineConfig({
  plugins: [
    react(), 
    federation({
      name: 'host',
      remotes: {
        'ui': 'http://localhost:3201/assets/remoteEntry.js',
      },
      shared: ['react', 'react-dom', 'react-router-dom'],
    }),
  ],...
});

All is working fine, the remote entry is published and exposed in a dev remote url as you see in my previous configuration.

I have vitest as test runner, when I run my test for my main app component I am getting the next error:

Someone knows how to configure vitest to mock that module federation request of the remote javascript file?

Answer 1

I had to switch to webpack for internal decition, but I remember I did something like this to solve this issue:

First, install mws in your application, then configure your server and your handlers:

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

Then in the handlers create a mock for your url remote:

import { rest } from 'msw';

export const handlers = [
  rest.get('http://localhost:8080/remoteEntry.js', (req, res, ctx) => {
    // Return a mocked response for the remote entry file
    return res(
      ctx.status(200),
      ctx.set('Content-Type', 'text/javascript'),
      ctx.body('console.log("Hello from the remote entry!")')
    );
  }),
];

I also created a mock for that remote entry file:

async function __federation_import(name) {
  return null;
}
const get = (module) => {
  return null;
};
const init = (shareScope) => {};
export { get, init };

I don't remember exactly how was the implementation but I how give you a ligh on how can you solve the issue.