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