how to test one micro front end component in which other micro frontend component is being used using jest and enzyme

Question

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 ?

Loden

I found some reference but couldn't fig out the right approach : single-spa.js.org/docs/testing/units/#jest-config – Loden

I found some close answers but I still get the same error : #66387724 – Loden

Answer 1

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> 
   )
})

Loden

Sorry, I forgot to mention in my answer what neet to be put outside. – Subinfeudate

Hey I am glad you figured your solution :) – Groupie