I have two micro frontends (written in react & typescript). dashboard MFE and Common MFE

common MFE has several component which can be consumed by dashboard independently. eg. Notification component, loader component etc...

MFE1 has dashboard.component.tsx and simplified version looks below,

  import React from react
  ....
  ....
  import notificationComponent from 'common/NotificationComponent'  <<====This is external module or component

  // and several other component which are part of common micro frontend

  const DashboardComponent = () => {
    ...
    ...
    ...
    return (<div>
           <notificationComponent .../>
           ....
   </div>)
  }

export default DashboardComponent;

I defined its type in remoteTypes.d.ts file as below,

src/remoteTypes.d.ts

declare module 'common/NotificatioComponent' {
    const NotificatioComponent: React.ComponentType<{ notification: { title: string, description: string, color: string } }>;
    export default NotificatioComponent;
}

This is working fine.

The problem is in unit testing of dashboard component with jest and enzyme.

when I write and run a simple test,

test('dashboard component',()=>{
   const wrapper =  mount(
            <Provider store={myStore}>
              <Router>
                <DashboardComponent />
              </Router>
            </Provider> 
   )
})

it throws error as below,

can not find module 'common/NotificationComponent' from 'src/components/dashboard.component.tsx'

Require Stack:
'src/components/dashboard.component.tsx
'src/components/dashboard.component.text.tsx

How should I resolve this error?

I'm exporting notification component as follow,

webpackage.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;
const path = require('path');
const deps = require('./package.json').dependencies;
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: './src/index.ts',
  ...
  ....
  plugins: [
    new ModuleFederationPlugin({

      name: 'common',

      filename: 'remoteEntry.js',

      exposes: {
        // expose each component
        './CommonBootstrap':'./src/bootstrap',
        './NotificationComponent': './src/components/notification/components/notification.component',   <<===== from here
      },

      shared: {
      ....
      }
  ],
};

Update

I found a good reference : Mocking federated modules in host application for jest

and tried in similar way but I get the same error still.

test('dashboard component',()=>{



       jest.mock('common/NotificationComponent', 
         () => { 
    
          ,
         { virtual: true }
       );

       const wrapper =  mount(
                <Provider store={myStore}>
                  <Router>
                    <DashboardComponent />
                  </Router>
                </Provider> 
       )
    })

but same error. what is wrong ?

CodePudding user response：

Okay. Finally I found the answer.

In above code snippet, I was doing one thing wrong as discussed below,

In earlier try, it was still failing because I was using jest.mock(...) inside it(...) or test(...) block as shown below,

test('dashboard component',()=>{

   jest.mock('common/NotificationComponent', 
     () => { 
         myFunc: () => 'hello'
      ,
     { virtual: true }
   );

   const wrapper =  mount(
            <Provider store={myStore}>
              <Router>
                <DashboardComponent />
              </Router>
            </Provider> 
   )
})

Solution,

This below code,

 jest.mock('common/NotificationComponent', 
         () => { 
             myFunc: () => 'hello'
          ,
         { virtual: true }
       );

you should put at top of your file. Don't put it inside it(...) or test(...) block. So it will look like below,

 import "@testing-library/jest-dom";
 import { shallow, mount } from "enzyme";

 jest.mock('common/NotificationComponent', 
     () => { 
         myFunc: () => 'hello'
      ,
     { virtual: true }
 );


test('dashboard component',()=>{

   const wrapper =  mount(
            <Provider store={myStore}>
              <Router>
                <DashboardComponent />
              </Router>
            </Provider> 
   )
})