Unit Testing Vite + React with Vitest

[muhammadhafizmm]

Hello everyone, I want to ask a question regarding unit testing on vite-plugin-federation using vitest. I'm confused, maybe doing unit testing on remote applications (exposing components) is possible, because we only need to make unit tests on each component that will be exposed. However, when we want to see the suitability of the exposed component results in the host application (which consumes the component), is it possible to do a simple async and create a unit test for the component?

I tried once, but it didn't go well.

Error: Uncaught [Error: Failed to load url http://localhost:3000/assets/remoteEntry.js (resolved id: http://localhost:3000/assets/remoteEntry.js). Does the file exist?]

Basically I just called a regular component using lazy import and suspense, but it seems that when it is called from federation, it needs different treatment. Can anyone help me on this?

test(
  'renders ShoppingPage from Module Federation',
  async () => {
    // Render ShopingPageMF component
    const { debug } = render(<ShoppingPageMF />);
    const ShoppingPageTitle = await waitFor(
      () => {
        debug();
        return screen.findAllByText(
          'Catalogue',
        );
      },
      { timeout: 20000 },
    );
    console.log(ShoppingPageTitle);
  },
  { timeout: 20000 },
);