53 questions
28
votes
3
answers
45k
views
Mocking methods on a Vue instance during TDD
I'm learning TDD whilst building my Vue app, and trying to abide by the strict laws of only writing enough production code to satisfy a failing unit test. I am really enjoying this approach, but I ...
- 545
25
votes
4
answers
18k
views
Vue test utils for Vue3 : document is not defined
I try to bootstrap a simple app based on the following Vue3, Vite, Vitest
I also installed the vue 3 compatible version of vue test utils to test vue components.
I have an error trying to replicate ...
- 1,332
28
votes
4
answers
28k
views
How to test Vue watcher that watches a computed property from VueX?
Suppose I have the following component:
import { mapState } from 'vuex';
import externalDependency from '...';
export default {
name: 'Foo',
computed: {
...mapState(['bar'])
},
watch: {
...
- 399
14
votes
2
answers
20k
views
Vue-test-utils: using $nextTick multiple times in a single test
I'm writing unit tests for vuelidate validation in my component. I figured out that the $touch() method is called asynchronously, so I need to use $nextTick() for the expect(). The problem appears ...
- 722
7
votes
1
answer
5k
views
Test on function call in Vue template only passes if the function is called with parentheses
I am using Vue v2.6 with Jest (v24.9) and Vue-Test-Utils (v1.03).
In order to mock a method I have seen two different syntaxes,
wrapper.vm.updateCart = jest.fn();
and
wrapper.setMethods({ updateCart: ...
- 2,091
45
votes
4
answers
23k
views
Vue-Test-Utils Unknown custom element: <router-link>
I'm using Jest to run my tests utilizing the vue-test-utils library.
Even though I've added the VueRouter to the localVue instance, it says it can't actually find the router-link component. If the ...
- 2,058
23
votes
4
answers
20k
views
vue test utils TypeError: Cannot destructure property `config` of 'undefined' or 'null'
I'm doing just simple unit test with vue test utils.
but It's not working.
I've no clue....
help me
I installed this things.....
> $ npm i -D jest @vue/test-utils vue-jest jest-serializer-vue babel-...
- 231
17
votes
2
answers
18k
views
What are "stubbed child components" in Vue Test Utils?
Vue Test Utils has an API method called shallowMount() that:
...creates a Wrapper that contains the mounted and rendered Vue component, but with stubbed child components.
I've searched the Vue Test ...
- 16.9k
12
votes
5
answers
9k
views
How to Test a Global Event Bus With Vue Test Utils?
I am trying to learn how to test events emitted through a global Event Bus. Here's the code with some comments in the places I don't know what to do.
// EvtBus.js
import Vue from 'vue';
export const ...
- 698
10
votes
3
answers
25k
views
Vue Testing (JEST): button.trigger('click') not working
Been reading up a lot of stackoverflow and github discussions, about vue jest having trouble with button.trigger('click'). I've been struggling over this issue for a few hours today, have to say I'm ...
- 289
10
votes
2
answers
26k
views
Vue test-utils how to test a router.push()
In my component , I have a method which will execute a router.push()
import router from "@/router";
// ...
export default {
// ...
methods: {
closeAlert: function() {
if (this....
user762579
9
votes
2
answers
14k
views
Mock mounted hook Jest testing unit
I am doing some unit testing for components. However, in some components, I have something running on the mounted hook that is making my test fail.
I have managed to mock the methods that I do not ...
- 5,814
8
votes
3
answers
32k
views
TypeError: Cannot read property 'getters' of undefined
I'm trying to test a basic Vue Component that makes reference to a Vuex store. I thought I followed Vue's example (https://vue-test-utils.vuejs.org/guides/using-with-vuex.html#mocking-getters) to a T ...
- 2,249
7
votes
1
answer
12k
views
Can I select an element by ref using vue test utils
If I have an image
<img class="pineapple" ref="pineapple" src="pineapple.jpg" />
Can I use the $ref
expect(wrapper.find($refs.pineapple).exists()).toBe(true)
instead of
expect(wrapper....
- 1,043
6
votes
1
answer
5k
views
How to unit test standalone Vue composition
I have a setup similar as the example in the docs where my composition lives in a separate file from my component as follows:
// composition.js
import { onMounted } from '@vue/composition-api';
...
- 969
4
votes
1
answer
2k
views
Cannot find button in bootstrap-vue modal (b-modal) int test
I want to test modal behavior in my test case.
open modal by button on page (isVisible false=> true)
close modal by button on modal (isVisible trye=> false)
First step is ok, but 2nd step is failed. I ...
- 970
3
votes
1
answer
2k
views
How to unit test inner function(not return) of setup in Vue3?
I want to test like this.
Case 1: Error
Cannot spy the inner property because it is not a function; undefined given instead.
Component.vue
export default {
setup() {
function outer() {
...
- 37
3
votes
1
answer
519
views
How can Sinon spies register a Vue component method as called when it is called as an event's callback?
I have a method called testfn in my vue component that gets called whenever event testevt fires. This method contains a call to console.log that clearly shows the method is being called.
When running ...
3
votes
1
answer
2k
views
How to disable the "Global error handler detected" warning in vue test utils
I'm creating async tests using vue-test-utils and jest using the approach described here:
https://vue-test-utils.vuejs.org/guides/#what-about-nexttick
where you set Vue.config.errorHandler = done ...
- 2,191
2
votes
0
answers
615
views
How to add styles to jest snapshot while testing vue component?
I had tried to use Jest for snapshot testing for Vue SFC. And I missed styles inside the generated snapshot file, only class names. Is it possible to add style rules to snapshot?
<template>
&...
- 1,233
2
votes
1
answer
5k
views
Testing for a function/method call on click event inside a functional component
After a number of days hitting a wall, I understood that testing functional components with vue-test-utils causes some issues
To summarize, I am using Bootstrap-Vue's B-Button with a @click event on ...
- 409
1
vote
1
answer
2k
views
Is it possible to test a Vue 3 Composition library which uses inject without a wrapping component?
I'm following this guide to create an auth composition library: https://mattlaw.dev/blog/vuejs-the-composition-api-and-firebase-authentication/
At a high level, you define a file /src/components/auth/...
- 922
1
vote
2
answers
3k
views
vue.js vuetify test-utils warning : Vue warn]: Invalid prop: type check failed for prop "src". Expected String, got Object
Using v-parallax vuetify with a prop to display an asset URL (it's a recommended hack..)
<v-parallax :src="parallaxUrl()">
methods: {
parallaxUrl() {
return require("@/assets/...
user762579
1
vote
1
answer
645
views
Use more than one directive to add data attributes to components
I have two directives which are supposed to add data attributes to components for testing, however, only one of the directives actually gets added. The two components are Bootstrap-Vue's BFormInput ...
- 409
1
vote
1
answer
1k
views
Could not locate module ~/assets/images/flags/undefined.png mapped as
I have some img tag which I fill it with dynamic address with require, it works as expected in the component but when I write a test for it throws this error
console.error
Error: Configuration ...
- 681