Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError: Cannot destructure property 'isActive' of 'undefined' as it is undefined - NuxtLink #1042

Open
Archetipo95 opened this issue Dec 16, 2024 · 0 comments

Comments

@Archetipo95
Copy link

Archetipo95 commented Dec 16, 2024

Environment

Reproduction

Link to the repo: Archetipo95/movies#2

FILES:

NavBar.vue File

<template>
  <div
    flex="~ row lg:col"
    justify-evenly items-center
    py5 lg:px5
    border="t lg:r base"
    bg-black
  >
    <NuxtLink v-slot="{ isActive }" to="/" :title="$t('Home')" data-testid="home-link">
      <div
        text-2xl
        :class="isActive ? 'i-ph-house-fill text-primary' : 'i-ph-house'"
      />
    </NuxtLink>
    <NuxtLink v-slot="{ isActive }" to="/movie" :title="$t('Movies')" data-testid="movies-link">
      <div
        text-2xl
        :class="isActive ? 'i-ph-film-strip-fill text-primary' : 'i-ph-film-strip'"
      />
    </NuxtLink>
    <NuxtLink v-slot="{ isActive }" to="/tv" :title="$t('TV Shows')" data-testid="tv-shows-link">
      <div
        text-2xl
        :class="isActive ? 'i-ph-television-simple-fill text-primary' : 'i-ph-television-simple'"
      />
    </NuxtLink>
    <NuxtLink v-slot="{ isActive }" to="/search" :title="$t('Search')" data-testid="search-link">
      <div
        text-2xl
        :class="isActive ? 'i-ph-magnifying-glass-fill text-primary' : 'i-ph-magnifying-glass'"
      />
    </NuxtLink>
  </div>
</template>

NavBar.nuxt.test.ts File

import type { VueWrapper } from '@vue/test-utils'
import { mountSuspended } from '@nuxt/test-utils/runtime'
import { describe, expect, it } from 'vitest'

import NavBar from './NavBar.vue'

describe('navBar', () => {
  it('renders Home link correctly', async () => {
    const wrapper = await mountSuspended(NavBar)

    // test true to be true
    expect(true).toBe(true)
  })

Describe the bug

Im trying to to a simple component test and I think it's failing to mock NuxtLink with slots when it is destruturing the property isActive

Additional context

No response

Logs

https://github.com/Archetipo95/movies/actions/runs/12358331784/job/34488575188?pr=2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant