vitest icon indicating copy to clipboard operation
vitest copied to clipboard

Fails to run tests with federated module

Open adarshdeep-ld opened this issue 1 year ago • 2 comments

Describe the bug

Hey folks, I found a problem that I don't know how to solve. I'm using module federation (@originjs/vite-plugin-federation) to get a remote module and since I've added config my tests are failing,

Here is my config:

export default defineConfig(() => ({
  plugins: [
    ElementPlus(),
    vue(),
    federation({
      name: 'team-red',
      remotes: {
        "team-blue": "http://localhost:5002/assets/remoteEntry.js",
        "team-green": "http://localhost:5001/assets/remoteEntry.js",
      },
      shared: ['vue','pinia']
  })
  ],
  build:{
    minify: false,
    target: ["chrome89", "edge89", "firefox89", "safari15"],
  },
  test: {
    globals: true,
    environment: "happy-dom",
    include: ["./src/**/*.{test,spec}.?(c|m)[jt]s?(x)"], 
  },
}))

I have just tried to mount the component that uses remote components and it gives the following error: image

So is there any way to work around it and get my test working?

Reproduction

I have reproduced the error on an example given be vite-plugin-federation https://github.com/adarshdeep-ld/vite-plugin-federation You can clone the above repository and follow steps mention in the following Readme https://github.com/adarshdeep-ld/vite-plugin-federation/blob/main/packages/examples/vue3-advanced-demo/README.md

System Info

Node Version: v20.11.1
pnpm Version: v9.1.0

Used Package Manager

pnpm

Validations

adarshdeep-ld avatar May 07 '24 21:05 adarshdeep-ld

Not familiar with module federation ideas, but I'm guessing the whole point of module federation is to not have to unit test entire modules.

If that's the case, they might simply recommend skipping their plugin during unit test by:

plugins: [
  ...,
  !process.env.VITEST && federation({ ... }),
]

Probably, it's better to ask on their end about what's the recommendation.

hi-ogawa avatar May 08 '24 02:05 hi-ogawa

Any solution for this? Trying to make some unit tests in child components that have a hook imported from Host and getting the same error...

Error: Failed to load url https://.../assets/remoteEntry.js (resolved id: https://.../assets/remoteEntry.js). Does the file exist?

victorharry avatar Aug 23 '24 20:08 victorharry

Vitest doesn't support module federation. But even if we did support http imports, this wouldn't work because you need a running server on the localhost:5002 host, and starting a server is out of scope of Vitest.

If you want to test your code that relies on module federation, disable the plugin.

sheremet-va avatar Oct 29 '24 15:10 sheremet-va