Not able to fire API call in Jest for react component imported in another react component

[Shwetharao]

I am trying to test Button click function in jest. These are my code.

mainComponent.js

 export default function MainComponent(){
     const saveApiSettings = () => {
     apiCall('rest/test_api/').then(res => {
      console.log(res)
    });
   }
 return( 
  <div>
   <CommonModule
    saveApiData={ saveApiSettings}
   />
 </div>)
}

commonModule.js

   export default function CommonModule() {
        const saveData = () => {
         props.saveApiData();
        }
        return (
         <Button
          onClick = {(e) => saveData(e)}
          id = "save-btn"
         >
          click
         </Button>
        )
      }

test.js

 it('save data to DB', async () => {
   act(() => {
    render(<MainComponent />);
   });
   act(() => {
    const checkSaveBtnenable = document.querySelector(`button[id = 'save-btn']`);
    checkSaveBtnenable.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });

handler.js

import { rest } from 'msw';
 export const handlers = [
  rest.post(`rest/test_api/`, async (req, res, ctx) => {
   console.log(req, "Not printing");
  })
 ]

It seems like its not able to hit API from test file. I am using MSW (Mock Server Work) to mock API calls. Its look like I am loading main component and trying to access another component click. I am not able to hit API defined in handler.js.