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

See more:

React

ReactJS

I am trying to test Button click function in jest.
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.

What I have tried:

Below is the code I had tried to test.

mainComponent.js

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

return(
)
}


commonModule.js

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

)
}


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");
})
]