Helpers to render VueJS components in unit tests.
Toolset to make complete or shallow rendering VueJS components while writing unit tests. Can be run under Jest or Mocha test runners. See vue-test-utils.vuejs.org for details.
Questions tagged [vue-test-utils]
814 questions
18
votes
3 answers
How do you set the data values in a component with Vue-Test-Utils before mounted is called?
I am using Jest with Vue-Test-Utils. The code I have been using looks like this:
beforeEach(() => {
wrapper = shallow(GridContainer, {
data: {
pageSize: count
},
propsData: {
userId,
managerId
}
})
})
In this…
Daryn
- 3,394
- 5
- 30
- 41
17
votes
2 answers
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 Utils documentation website but failed to find a…
urig
- 16,016
- 26
- 115
- 184
17
votes
2 answers
How can I test a custom input Vue component
In the Vue.js documentation, there is an example of a custom input component. I'm trying to figure out how I can write a unit test for a component like that. Usage of the component would look like this
Jason Desrosiers
- 22,479
- 5
- 47
- 53
16
votes
5 answers
vue-test-utils: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value
I've looked at other answers with this problem, and it seems to be caused by trying to import vue-router into the test. This however, is not the case for my problem. Here is my test code:
import { mount, shallowMount, createLocalVue } from…
janedoe
- 907
- 1
- 13
- 33
15
votes
3 answers
Testing with `Created` hook with `vue-test-utils` and `jest`
I have a Vue page like this:
Now, we want to the testing of this created hook and check that doSomething() method…
Neeladri Rudra
- 151
- 1
- 1
- 4
15
votes
1 answer
Trigger form submit on button click in Vue Unit Test
Is there a way to actually trigger the submission of a form by clicking on a submit button in a Vue Unit Test?
Let's take this simple component:
15
votes
1 answer
How can you test if an input is focused with Vue Test utils?
I have a directive that focuses on the input. And i want to test this directive. The only issue is i can't find how i can test if the input is focused
This is my simple mock component
…
Constantin Chirila
- 1,979
- 2
- 19
- 33
14
votes
2 answers
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 when I need two nextTick()s for two…
Fidd
- 722
- 1
- 8
- 20
13
votes
3 answers
Test suite failed to run import.meta.env.VITE_*
After adding the environment variable import.meta.env.VITE_* in my code, the tests with vue-test-utils started to fail, with the error:
Jest suite failed to run
error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option…
sfn
- 263
- 1
- 2
- 13
13
votes
2 answers
Vue how to test component with slot and slot-props
I want to test this FooComponent:
Maksim Nesterenko
- 5,661
- 11
- 57
- 91
13
votes
1 answer
Suppress Vue warnings in unit tests
I am trying to suppress my warnings in my tests following the config listed here: https://vue-test-utils.vuejs.org/api/config.html#silent, which is as follows:
import { config } from '@vue/test-utils';
// this should actually be the default but the…
boardlemur
- 2,861
- 1
- 18
- 24
12
votes
1 answer
How to unit test a VUE component that have provide/inject?
I am writing some unit test but I got trouble with component that have inject property.
I am using shallowMount. I did some research about this.And there is way to create fake data for provide…
Hoang Subin
- 6,610
- 6
- 37
- 56
12
votes
5 answers
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 EvtBus = new Vue();