URL error testing a component accessing a backend on VueJS 3/Vitest

Question

I'm trying to test a VueJS 3 component that access a backend in the mounted() lifecycle.
The call works when not in test mode, via a simple render of the page in the browser, but not when testing using vue-test-utils mount() or shallowMount().

It provokes an error using either the Fetch API or Axios.
Fetch API error :

InvalidArgumentError: Invalid URL: port must be a valid integer or a string representation of an integer. ❯ parseURL node:internal/deps/undici/undici:329:15 ❯ Object.parseOrigin node:internal/deps/undici/undici:361:13

Axios error :

RangeError: Port should be >= 0 and < 65536. Received type string (':8080').

The backend URL is : http://myserver.ab.cdefg:8080/api/applications

The component being tested :

<script>
import Puce from "@/components/Puce.vue";
import HomeBridge from "@/views/subviews/HomeBridge.vue";
import axios from "axios";

export default {
  components: {HomeBridge, Puce},
  data() {
    return {
      hover: false,
      hover_app: 0,
      filtered: 'NONE',
      panels: []
    }
  },
  methods: {
    async getApplicationsFromBackend() {
      /*const response = await fetch('http://myserver.ab.cdefg:8080/api/applications');
      this.panels = await response.json();
      console.log(JSON.stringify(this.panels));*/


      axios.defaults.baseURL = 'http://myserver.ab.cdefg:8080';
      axios.get('/api/applications')
          .then(response => {
            this.panels = response.data;
            console.log(JSON.stringify(this.panels));
          })
          .catch(error => {
            console.error(error);
          });
    },
...
  async mounted() {
    this.getApplicationsFromBackend();
  }
}

</script>

And the test file :

import {flushPromises, shallowMount} from '@vue/test-utils'
import axios from "axios";
import MyComponent from "@/components/MyComponent .vue";
import { test, expect} from "vitest";

test('fetch applications', async () => {
    const wrapper = shallowMount(MyComponent)

    await flushPromises().then(() => {
        const apps = wrapper.findAll('[data-test="app"]')
        expect(apps.length).greaterThan(0);
    });
})

The versions of the components :
node : ^18.18.0
npm : ^10.2.0
vite : ^4.3.9
vitest : 0.33
vuejs : ^3.3.4
axios : ^1.5.1

Tests are run via
npm run test
which in the api.js config equals to

    "test": "vitest --dom",

If i run the test in debug mode (in intellij webstorm), at some point I reach the file happy-dom\src\location\URL.ts where there's a regex used for parsing the URL :
/(https?:)\/\/([-a-zA-Z0-9@:%._\+~#=]{2,256}[a-z]{2,6})(:[0-9]*)?([-a-zA-Z0-9@:%_\+.~c&//=]*)(\?[^#]*)?(#.*)?/
And indeed that regexp capture the port as ':8080' and not '8080' but i don't know if it's the expected behavior...

What can be the cause ?

Answer 1

Checking the package-lock.json, i found out the version of happy-dom was quite old (6.0.4).
I ran npm update happy-dom which updated it to version 12.9.1 and the error disappeared.