I have a component OverviewMapView.vue written in Vue 3 with a Map component from MapBox and the component is defined with vue-class-component.

I want to write unit tests for it but at this point nothing specific because just checking if the component gets rendered in OverviewMapView.test.js does not even succeed.

At the moment, when I run npx vitest I get:

FAIL  tests/OverviewMapView.test.js [ tests/OverviewMapView.test.js ]
ReferenceError: Vue is not defined
 ❯ Object.<anonymous> node_modules/vue-mapbox-ts/lib/index.min.js:16:41674

Just for reference I also added the relevant code of index.min.js that is mentioned in the error.

How can I fix the error?

OverviewMapView.vue

<template>
    <el-container>
        <el-main>
            <mapbox-map
            :accessToken="apiKey"
            :mapStyle="mapStyle"
            :center="mapCenter"
            :zoom="mapZoom"
            @loaded="mapLoaded"
            @update:center="mapAreaChanged"
            @update:zoom="zoomUpdated"
            >
                <mapbox-marker
                v-for="(missions, key) in missionsByLocation"
                :lngLat="mapboxLongLat(calculateMissionsCenter(missions))"
                :key="key"
                :id="key"
                @click="flyToMarker(key)"
                >
                  <template v-slot:icon>
                    <img class="marker-img" :src="markerImage" />
                    <span class="marker-number">{{ missions.length }}</span>
                    </template>
                </mapbox-marker>
                <mapbox-navigation-control position="bottom-left" />
            </mapbox-map>
        </el-main>
    </el-container>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import {
  MapboxMap,
  MapboxMarker,
  MapboxNavigationControl,
  MapboxPopup,
} from 'vue-mapbox-ts';
import { Map as MapboxMapObject } from 'mapbox-gl';
import * as missionService from '@/services/mission-service';
import { Mission } from '@/types/api/Mission';
import { computed, ref } from 'vue';
import axios from 'axios';
import { mapboxLongLat } from '@/utils/helper';
import { Flight } from '@/types/api/Flight';
import NavBar from '@/App.vue';
import { getFlight } from '@/states';

@Options({
  components: {
    NavBar,
    MapboxMap,
    MapboxMarker,
    MapboxNavigationControl,
    MapboxPopup,
  },
})
/* eslint-disable @typescript-eslint/no-explicit-any*/
export default class OverviewMapView extends Vue {
  // collapse elements that are active are stored in here
  activeNames = ref(['1']);

  // map related variables
  // mapbox API Key, TODO should be stored in .env file
  apiKey = process.env.VUE_APP_MAPBOX_KEY;
  map: MapboxMapObject | null = null;

  // map settings
  mapCenter = JSON.parse(localStorage.getItem('mapCenter') || 'null') || [
    14.12456, 47.59397,
  ];

  mapZoom = JSON.parse(localStorage.getItem('mapZoom') || 'null') || 6;
  mapStyle = 'streets-v11';

  markerImage = 'images/marker/mapbox-marker-icon-red.svg';

  // missions
  missions: Mission[] = [];
  missionsByLocation: { [key: string]: Mission[] } = {};
  visibleMissions: { [key: string]: Mission[] } = {};
  flightIsFinished: boolean[] = [];
  flightHasLabels: boolean[] = [];
  flightIsApproved: boolean[] = [];

  // filtering
  allInformationLoaded = false;

  storedOnlyShowVisible = localStorage.getItem('onlyShowVisible');
  onlyShowVisible = this.storedOnlyShowVisible
    ? JSON.parse(this.storedOnlyShowVisible)
    : false;

  onlyShowUnlabeled = false;

  storedDateRange = localStorage.getItem('dateRangeFilter');
  dateRangeFilter = this.storedDateRange
    ? JSON.parse(this.storedDateRange)
    : [];

  shortcuts = [
    {
      text: 'Last week',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: 'Last month',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: 'Last 3 months',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ];

  storedLocations = localStorage.getItem('locations');
  locations = this.storedLocations ? JSON.parse(this.storedLocations) : [];

  locationNames: { [key: string]: string } = {};

  storedSelectedFlightStatus = localStorage.getItem('selectedFlightStatus');
  selectedFlightStatus = this.storedSelectedFlightStatus
    ? JSON.parse(this.storedSelectedFlightStatus)
    : [0, 1, 2, 3];

  flightStatusOptions = [
    {
      value: 0,
      label: 'without labels',
    },
    {
      value: 1,
      label: 'with labels',
    },
    {
      value: 2,
      label: 'marked as labeled',
    },
    {
      value: 3,
      label: 'approved',
    },
  ];
}
</script> 
<style lang="scss">
</style>

OverviewMapView.test.js

import { mount } from '@vue/test-utils';
import Vue from 'vue';
import OverviewMapView from '@/views/OverviewMapView.vue';

describe('OverviewMapView', () => {
  test('should render correctly', () => {
    const wrapper = mount(OverviewMapView);
    expect(wrapper.exists()).toBe(true);
  })
})

node_modules/vue-mapbox-ts/lib/index.min.js:16:41674

var index = function (e, t, o, i, n, r, a, l, s) {
... 
}
({}, 0, Vue, Deferred, mapboxgl, MapboxGeocoder, Deferred$1, equal, MapboxDrawControl);

I know I should check the code in node_modules/vue-mapbox-ts/lib/index.min.js but the only thing I know to check is “Vue” and except for the line I mentioned earlier, the word is not used in the code. However, I do not understand the rest of the code enough to check it.

ChatGPT says

The error "ReferenceError: Vue is not defined" indicates that the Vue object is not available in
the scope where it's being referenced, which is within the index function in the vue-mapbox-ts library's index.min.js file.

You shouldn't define Vue within the index.min.js file because Vue is typically imported or provided
from outside the file, usually as a dependency or as a global object. Instead, you need to ensure
that Vue is imported or provided correctly in the environment where you're using vue-mapbox-ts.

But I also do not understand the index.min.js enough to check that…