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();

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

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;
      ).then((route) => {
          .get(route, {
            params: {
              users: this.users,
              start_date: this.startDate,
              end_date: this.endDate,
          .then((response) => {
            if ( == "success") {
              let { card } =;
            this.loading = false;
          .catch((error) => {
            this.errors = "Error - Notify Tech Team ";
  watch: {},
  mounted() {


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