831 questions
1
vote
1
answer
54
views
Vue 2 + Composition API + vue-test-utils 1.3.6: `Cannot redefine property` and `setProps` doesn’t trigger `watchers`
Problem:
I’m migrating a Vue 2.6 app to the Composition API (via the plugin) and hit two testing issues with vue-test-utils (v1) + Jest:
Jest couldn’t mock functions from a plain TS module (not a Vue ...
- 1,192
0
votes
0
answers
34
views
Test Contentful composable with useNuxtApp - function undefined
I have a Nuxt composable that fetches data from Contentful using the contentful client's getEntries function. It's working on the frontend of my website but when I run my tests i'm getting:
TypeError: ...
- 3,039
0
votes
1
answer
407
views
Vue3 testing Provide/Inject state change using vitest and @vue/test-utils
I have a vue3 component which simply renders a list using an array of objects provided to it. If the array is empty it shows a "no data" message.
The component gets its data via a dependency ...
- 487
0
votes
0
answers
83
views
Jest Test with Vue3 - $q.loading is undefined
Currently migrating a project from Vue2 to Vue3, and it's mostly done - the app seems to work fine. However, Jest tests seem to have trouble passing. I have updated Vue Test Utils to V2 for Vue3 ...
- 179
2
votes
1
answer
181
views
How to mock i18n of a component
I am using a 3rd party vue component SomeComponent that implements its own translations.
This is my mount in my test
import { mount } from '@vue/test-utils';
import { SomeComponent } from '../../some-...
- 1,322
2
votes
1
answer
943
views
Vue how to mock a ref value
I am writing a modal component in vue 3:
// MyModal.vue
<script setup>
const emit = defineEmits(['close'])
const modalDialog = ref(null)
const close = () => {
emit('close')
...
- 843
0
votes
1
answer
691
views
How to test v-text-field rule placeholder's text in v-messages__message?
<v-text-field
density="compact"
v-model="textMaterial"
:rules="textMaterialRules"
label="Text Material"
></v-text-field>
This is a ...
- 68
0
votes
1
answer
232
views
Jest & Vue Testing UseHead inside Computed
Trying to test UseHead in my component that's inside of a computed but it is throwing the following error Cannot read properties of undefined (reading 'name')
Vue Component has
useHead(computed(() =&...
- 301
0
votes
1
answer
844
views
Using Vue JS 3, vitest and happy-dom, how do I mount a component that requires an HTMLElement's clientWidth?
We have a component that does the following:
Inside the template, has a div referred to as workspace
when the component is mounted, inside the onMounted() it calls a method to calculate size
the ...
- 2,736
0
votes
0
answers
219
views
How to Unit test errorCaptured Lifecycle Hook in Vue3?
I am trying to trigger error from child component so that errorCapttured hook will be triggered in main.vue
Main.vue
<template>
<div class="main">
<q2-section class=&...
0
votes
1
answer
833
views
Can't get mock to execute in vitest
I'm trying to write a vitest test around a composable that reads and writes postMessage() for communication between iframes.
The Vue docs say that if the composable relies on lifecycle hooks to mount ...
- 353
0
votes
1
answer
285
views
vue test utils v2 : cannot mock a global function
Brand new to vue testing and I'm trying to test a component that calls a global function this is imported in my app.js
A simplified version of the component ConversationStatus:
<script setup>
...
- 353
0
votes
1
answer
135
views
how to spy/stub a function and stub an action Vuex in the component vue3 composition api
my stack:
cypress
@vue/test-utils
component in vue3 in composition api (<script setup />)
My test, i would like to spy a method inside a component, and spy action vuex inside a method in ...
- 3
0
votes
1
answer
88
views
What is the right way to pass component props in Vue3 tests that use Vuetify components?
I am trying to write a basic unit test for a component called CompanyBioPanel. Here is a simplified version of the component:
// template
<v-card-text>
<v-tabs v-model="...
- 118
1
vote
1
answer
157
views
Vuejs 3, How can I properly test this: Composite API, shallowMount and emit trigger?
I have this project structure:
/App.vue
|-components/CoponentA.vue
|-components/CoponentB.vue
In App.vue the ComponentB is not mounted until ComponentA emits an event:
<!-- App.vue -->
<...
- 39.5k
0
votes
0
answers
119
views
toHaveBeenCalled() assertion doesn't work in vue3 app
I try to write test for my Vue 3 app and I try to test my component.
In this post I will use my simple component to show my case.
So I have my simple component with button and when the button is ...
3
votes
2
answers
1k
views
[Vue warn]: Property "$pinia" was accessed during render but is not defined on instance
Context
We are using Vue3 and Pinia and vitest
Rather than creating strict "unit" component tests, we're trying to do more E2E/integration testing (ie. where we're mounting and testing a ...
2
votes
0
answers
374
views
Vue3 Vitest isVisible() seems to be cached/stuck
I have a vue3 component which embodies a context menu. I have tested the component in the browser and it works fine. Also most situations work fine in vitest but when I use the .isVisible() check ...
- 25
0
votes
0
answers
619
views
How to mock the $refs attribute when doing unit testing with jest?
Below is a mounted I have in a vue component which I want to perform a unit testing on.
mounted () {
const pageRef = this.$refs.tabRef.offsetParent.offsetParent;
this.pageSize = {
...
- 1
1
vote
1
answer
3k
views
Cannot call trigger on an empty DOMWrapper
I am upgrading a Vue 2 component library to Vue 3. I have upgraded all the packages in the project, and made some necessary changes to get the code to compile. The components work as expected in a ...
- 3,117
1
vote
0
answers
309
views
@Vue/test-utils: findAll() always returning 0 element
I'm building a feedback rating component with stars icons, but when I test to check if the correct number of stars are being rendered depending on the prop length, wrapper.findAll('svg') always ...
- 76
2
votes
0
answers
716
views
Vitest, Vue Test Utils not replacing custom component with implementation
I have been trying to implement a component test using Vitest and Vue Test Utils. Currently my issue is that the component does not replace the custom component with the component implementation.
This ...
- 711
1
vote
1
answer
893
views
How to test a watch on a computed property linked to a store getter, with jest and vue-test-utils?
I have a Vue component.
My component have a computed property that refer to a getter of a vuex store.
I use a watch to perform some action when this getter is updated.
I want to test the watch using ...
- 89
2
votes
0
answers
2k
views
Nuxt 3 testing page with async useFetch, onMounted and Vitest
I'm trying to test a Nuxt page, but I'm having a promises issue because mocked fetch works but the page is not mounted
this is the page script:
<script lang="ts" setup>
import { ...
- 126
2
votes
1
answer
833
views
Cannot test if emit is called in Vue 3 component
In my Vue 3 component I have a link that uses @click.prevent to call a method that emits and event. I'm unable to figure out why my attempts to test if this method is called or event is emitted fail.
...
- 31