Questions tagged [vue-test-utils]
Helpers to render VueJS components in unit tests.
vue-test-utils
839
questions
0
votes
1
answer
28
views
Vue Testing: Triggering Checkbox not working
I'm trying to test if a checkbox has been checked with Vue test utils and Vitest, but the test always fails and I don't understand why.
Component.vue:
<template>
<input type="...
- 15
1
vote
1
answer
48
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')
...
- 623
0
votes
0
answers
21
views
TypeError: Cannot add property widgetRef, object is not extensible
Using vue/test-utils v1 I was modifying the $refs like this
const wrapper = factory();
wrapper.vm.$refs.widgetRef = {
actionStep: vi.fn(),
redraw: vi.fn(),
};
After moving to v2, now its throwing ...
- 41.6k
0
votes
1
answer
40
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 ...
- 41
0
votes
1
answer
51
views
Vue 3 + Vuetify + VTU: How to programmatically set input of v-text-field
I'm trying to write a unit test to check if my form validation works.
for that I've created a Component "Login.vue":
<script setup lang="ts">
import {ref} from "vue"...
- 1
0
votes
1
answer
47
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
0
answers
63
views
How to simulate or Mock file selection with input[type=file] tag in vitest using vue test util
I have a component which is having an input tag of type=file.
I want write a vitest test function, to simulate selection of file and assert its effects.
Gemini gives below script but fails at line 6, ...
- 71
0
votes
0
answers
17
views
Testing a form with vue utils on Vue.js 3 - TypeError: Cannot read properties of null (reading 'value')
Essentially, I'm trying to test an emitted event's result on a form. However, when I launch my test, this error is returned:
TypeError: Cannot read properties of null (reading 'value').
It occurs ...
0
votes
0
answers
45
views
Jest Testing Vue 3 Component: Verifying Vuex Store Integration for Updated userEmailSearched Array
I'm currently developing a Vue 3 project where I'm integrating a search feature. When users input an email address, a dropdown appears below the email input field. The system checks if the entered ...
- 1
0
votes
1
answer
234
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,626
2
votes
1
answer
298
views
How do I test a Vuetify 3 select with vitest and vue-test-utils?
I have a v-select inside a form that I want to test with vitest and vue-test-utils.
<v-select
clearable
:items="models"
item-value="id"
item-text="name"
ref=&...
- 21
0
votes
0
answers
52
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
0
answers
34
views
How use localVue in test?
I use Quasar and vue test utils. Try to test component with Quasar components like q-btn and etc.
Vue component:
<template>
...
<q-btn
data-test="deleteBtn"
@click="...
0
votes
0
answers
18
views
Issue with vue-test-utils and module federation
I am facing below error when I run my Test case file in vue-test-utils
ypeError: Cannot read properties of undefined (reading 'call') at __webpack_require__ (/Users/nipun/Desktop/core-system-web-app/...
0
votes
1
answer
46
views
Why Vue's vue-test-utils test unit does not reach the proper route when using clicking a button?
I'm trying to write test for a form submission and no matter what I tried it failed.
I was able to reduce the problem to a and App (App.vue), 2 components (TroubledLogin.vue and Info.vue) and a test ...
- 5,736
0
votes
1
answer
144
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 ...
- 343
0
votes
1
answer
44
views
How to test if a form submit was successful with Vue Test Utils?
How do I test if a login was successful ?
I have a Login component
<template>
<NavBar></NavBar>
<div id="login">
<h1 style="text-align: ...
- 5,736
0
votes
1
answer
76
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>
...
- 343
0
votes
1
answer
125
views
vue-test-utils v2: testing v-model value updates on keydown event
I'm brand new to Vue Test Utils and struggling a bit with the documentation on testing v-model updates. I'm using vite and so I've decided to use vitest
I have an AutoComplete component with two slots ...
- 343
0
votes
1
answer
56
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
0
answers
56
views
Vue3 Options API + Jest + vue test utils: nested function testing problem
I have Component.vue that i need to test:
Component.vue
<script setup>
const someFunction = () => {
//...some code i do not want to execute
}
const functionTotest = () => {
if(...
0
votes
1
answer
137
views
@vue/test-utils how to capture custom emit from child component
I'm trying to unit test a component that has a child component called <ButtonStandard> which captures a click event and emits a custom event called pressed.
The parent component captures the ...
- 343
0
votes
1
answer
55
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
0
votes
1
answer
109
views
How can I wait for an emitted event of a mounted component in vue-test-utils
Suppose I have a vue component which emits an event when ready (AG Grid for example):
<ag-grid-vue
...
@grid-ready="onGridReady"
...
/>
how can I wait for this event to be ...
- 5,095
0
votes
1
answer
57
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 -->
<...
- 38k
0
votes
0
answers
434
views
How to Resolve [@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment in Vue 3 and Jest Tests?
I'm working on a Vue 3 project with TypeScript and Jest for unit testing. I've encountered a challenging issue when running my Jest tests, which throws the following error:
[@vue/compiler-sfc] No fs ...
- 47
0
votes
0
answers
66
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 ...
0
votes
1
answer
102
views
How to pass a SFC with required props to a slot in vue test utils?
Following the Vue 3 docs Slots - Advanced Usage you can pass a SFC to a slot to render in your tests which we want to do for some integrated accessibility testing. My SFC has required props that need ...
- 71
2
votes
2
answers
467
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 ...
0
votes
0
answers
47
views
bootstrap5 with vue3: the vue-test-utils problem
I'm using bootstrap5 in my vue3 app, I integrated it as follow
// mains.ts
import 'uno.css';
import '../src/styles/bootstrap_customization.css';
import VTooltip from 'floating-vue'
import { ...
- 760
2
votes
0
answers
146
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
153
views
How to Test route from useRoute in a Vue.js 3 Composition API Component?
I'm facing challenges in testing a Vue.js 3 component that utilizes the useRoute from the Vue Router within the Vue Test Utils, Mocha, and Chai framework. My component is written using the Composition ...
0
votes
0
answers
342
views
Vue testing a component that uses composables
I'm using vitest to put together unit tests for components in my web app. I've run into an issue where my component uses a composable to get some state variables, and the composable is undefined when ...
- 294
0
votes
0
answers
72
views
How can integration tests be written for these kinds of components?
It is my first time writing an integration test for these kinds of components. Please help me or provide an example or any tutorial on that.
My component is in Vue 3, and I am using the vitest ...
0
votes
0
answers
269
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
0
votes
1
answer
44
views
Cannot view complete html and inline events in jest testing with vue-test utils in wrapper.html()
I just started to include unit tests to vue3 application using Jest and Vue-test utils. Installed all the latest compatible versions as below and my jest config is also below. why cant we access ...
- 113
0
votes
1
answer
740
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,077
0
votes
1
answer
279
views
Mock function in when testing another function in Vue composable
I have a case with the following:
Composable function useTreeData(), which has many other functions inside
Function that is returned as a result of destructuring the useTreeData, called onNodeChange()...
- 1,605
0
votes
0
answers
53
views
Jest/Vue test utils - How to test functions are called when key is pressed?
I have an event that added using onMounted() method using window.addEventListener. How to test that my method goPrevChannel() or goNextChannel() are called when I press arrow down or arrow up key?
...
- 1,342
0
votes
0
answers
136
views
vitest router-link stub not display the text
I have a vitest to test a button component the test looks like this:
it('renders a router-link when href prop is provided', () => {
const wrapper = shallowMount(Button, {
props: {
...
- 6,936
0
votes
0
answers
24
views
How to avoid rerenders in a Vue component while testing using Jest
I'm trying to test a VueJS application using Jest and Vue Test Utils. Now the tests seem to have been properly written, and the component itself is working fine.
When I run my test it seems to be ...
- 191
1
vote
0
answers
127
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 ...
- 66
0
votes
1
answer
201
views
Why isn't my method being called after .trigger('click') using vue 3 composition api, vue test utils and vitest
I have a test which is checking to see if a function was called on click
describe("Dropdown Component", () => {
let wrapper;
let selectedMeter = ref({});
let store
let isBouncing =...
2
votes
0
answers
481
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 ...
- 671
0
votes
0
answers
172
views
Vitest doesn't react onClick after submit on form
When test runs, it clicks on the submit button goes to handleSubmit() (when I console.log from there it works) as you can see values in the terminal picture.
But usernameError never renders so it cant ...
0
votes
1
answer
27
views
VTU not reading props object passed to the mount() function
When mounting a component with props object, VTU does not read props from the options object passed to the mount() function and therefore the test always fails.
Otp.vue
<template>
<div ...
- 66
1
vote
1
answer
462
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 ...
- 67
0
votes
0
answers
59
views
Vue Test Utils - Snapshot of vue components not working
Im trying to get a snapshot of my vue component. Instead, it prints just some code.
Shouldn't I be able to see the all html view rendered in the snapshot with the fields filled in?
Im new with vue ...
- 543
0
votes
1
answer
37
views
need to wait between multiple click triggers
I noticed I needed to delay click triggers if there were more than one in order for the test to pass. I couldn't figure out what was wrong since the buttons were reacting as I wanted when clicked by ...
- 434
1
vote
0
answers
1k
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 { ...
- 116