Getting started with Jest in a Laravel/Vue Project

I'm just starting to learn Jest and I'm having some issues getting started. Basically I'm trying to test a function that fetches data when the component mounts. From my understanding the best option is to make a mock version of the axios request.

So I made one like so -

jest.mock("axios", () => ({
  get: () => Promise.resolve({ card: {info: {title: "this is the title"}}})
}));

However, when I try to run the test I get this error -

UnhandledPromiseRejectionWarning: ReferenceError: axios is not defined
(node:35060) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:35060) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 

Any Ideas why it does not recognize the mocked axios function?

Here is the full test file

import {createLocalVue, mount, shallowMount } from '@vue/test-utils';
import CardBilledBeforeSigned from '@/components/metrics/datacards/CardBilledBeforeSigned.vue';
import routeMixin from "../../../../../resources/js/mixins/routes/RoutesMixin"

// create an extended `Vue` constructor
const localVue = createLocalVue();
localVue.use(routeMixin)

jest.mock("axios", () => ({
  get: () => Promise.resolve({ card: {info: {title: "this is the title"}}})
}));


describe("CardBilledBeforeSigned.vue", () => {
  it("mocking the axios call to get card dto", () => {
    var wrapper = shallowMount(CardBilledBeforeSigned, {localVue});
  
  
  });
});

and here is the component I'm testing

<template>
  <data-card
    :loading="loading"
    :table-view="tableView"
    :chart-view="chartView"
    :card="card"
  />
</template>
<script>
import DataCardModel from "../../../models/metrics/datacard/DataCard";
import DataCard from "./DataCard";
export default {
  components: { DataCard },
  props: ["users", "startDate", "endDate", "chartView", "tableView"],
  data() {
    return {
      loading: true,
      card: new DataCardModel(),
    };
  },
  methods: {
    get() {
      this.loading = true;
      this.globalRoute(
        "route.needed"
      ).then((route) => {
        axios
          .get(route, {
            params: {
              users: this.users,
              start_date: this.startDate,
              end_date: this.endDate,
            },
          })
          .then((response) => {
            if (response.data.status == "success") {
              let { card } = response.data.payload;
              this.card.fill(card);
              console.log(this.card);
            }
            this.loading = false;
          })
          .catch((error) => {
            console.log(error);
            this.errors = "Error - Notify Tech Team ";
          });
      });
    },
  },
  watch: {},
  mounted() {
    this.get();
  },
};
</script>

<style>
</style>

Also, any advice on the best way to test a component like this would be helpful. Thanks,