How to setup cucumber in vue to test the navigation function via BDD

I’m trying to test navigation in a Vue.js application using Cucumber.js. I want to simulate clicking a link on the home page and verify that it navigates to the about page. It seems that this brings up a few problems, such as the Vue tag syntax. Is there a best practice way to solve this problem?

Here is the relevant code:

navigationStep.ts

import { mount } from '@vue/test-utils'
import { Given, When, Then } from '@cucumber/cucumber'
import App from '../../../src/App.vue'
import router from '../../../src/router/index.ts'
import assert from 'assert'

let wrapper

Given('I am at the home page', function () {
  this.wrapper = mount(App, {
    global: {
      plugins: [router]
    }
  })
  router.push('/')
})

When('I click at the link', function () {
  const aboutLink = this.wrapper.get('a[href="/about"]')
  aboutLink.trigger('click')
})

Then('I should be at the second page', function () {
  const currentRoute = router.currentRoute.value.path
  assert.strictEqual(currentRoute, '/about')
})

App.vue

<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

This is the error message I got:

<script setup lang="ts">


SyntaxError: Unexpected token '<'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (C:UsersPatrickSchwendemannDocumentsGitvue-project-basic__tests__bddstepsnavigationStep.ts:3:13)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
Waiting for the debugger to disconnect...
Waiting for the debugger to disconnect...

Thank you for your help