I have a vue component that fetches data from an api in the "created" function. I'm just getting up and running using the following testing stack:

  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/vue": "^5.8.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.4.6",
    "jest": "^27.4.7",
    "vue-jest": "^3.0.7",
    "webpack-dev-server": "^3.11.0"
  }

My current test:

import BatchCalendar from '../src/components/batch_calendar.vue';
import { render } from '@testing-library/vue';

test('It renders correctly and loads initial data', done => {
    const wrapper = await render(BatchCalendar);

        
    getByText('Calendar Notices');
});

I know that vue testing library abstracts some methods away from the core vue testing utilities, so I'm left with using the "render" method of vue testing library.

My question is how should I go about handling the API call in the vue created hook.

1. Should all api calls (and also async methods?) be mocked?
2. How/where do I place await/async functions?
3. If I have a plugin (fullcalendar) that is making API requests on its own when rendering, how would I go about mocking/handling that?

Let me know if you need more info, thanks.