Test definedExpose with times in snackbar component

[SeyyedKhandon]

The error:

expected false to be true // Object.is equality 

- Expected
+ Received

- true
+ false

This is the component:

<template>
  <Teleport to="body">
    <Transition :duration="600">
      <div v-if="isOpen" class="snackbar" data-testid="snackbar">
        <div class="snackbar-content">
          {{ message }}
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref } from 'vue'
function useSnackbar() {
  const isOpen = ref(false)
  const message = ref('')
  const duration = ref(3000)
  const timeoutId = ref<number | NodeJS.Timeout>(0)

  const showSnackbar = (text: string, durationTime = 3000): void => {
    isOpen.value = true
    message.value = text
    duration.value = durationTime
    hideSnackbar()
  }
  const hideSnackbar = (): void => {
    timeoutId.value = setTimeout(() => {
      isOpen.value = false
      message.value = ''
    }, duration.value)
  }

  return { isOpen, message, timeoutId, showSnackbar }
}
const { isOpen, message, timeoutId, showSnackbar } = useSnackbar()

onBeforeUnmount(() => clearTimeout(timeoutId.value))

defineExpose({ showSnackbar })
</script>

This is the test:

import { nextTick } from 'vue'
import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Snackbar from './index.vue'

describe('Snackbar', () => {
  test('renders the snackbar when isOpen is true', async () => {
    const message = 'Test message'
    const wrapper = mount(Snackbar)

    await wrapper.vm.showSnackbar(message, 3000)
    await nextTick()

    const snackbar = wrapper.find('.snackbar')
    expect(snackbar.exists()).toBe(true)
    expect(snackbar.text()).toBe(message)
  })
})

What is the problem? how should I fix it?

[cexbrayat]

Hi @SeyyedKhandon

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[SeyyedKhandon]

@cexbrayat Here it is:
https://stackblitz.com/edit/github-cfjlzw?file=src%2Fcomponents%2FSnackbar.vue,src%2Fcomponents%2F__tests__%2FSnackbar.spec.ts,package.json

[cexbrayat]

Ok I see, this is because your test uses Teleport: the snackbar is added to the body element.

This test should work:

import { nextTick } from 'vue'
import { describe, test, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Snackbar from '../Snackbar.vue'

describe('Snackbar', () => {
  test('renders the snackbar when isOpen is true', async () => {
    const message = 'Test message'
    const wrapper = mount(Snackbar)
    
    await wrapper.vm.showSnackbar(message, 3000)
    await nextTick()
    
    expect(document.body.querySelector('.snackbar').textContent).toBe(message)
  })
})

Check out https://test-utils.vuejs.org/guide/advanced/teleport.html for more info