Stack Overflow
Stack Overflow

Questions tagged [vue-test-utils]

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.

814 questions
11
votes
2 answers

Configuring filters with vue-test-utils

How can we configure a component mount with a globally applied filter? I assume it would be some options passed to createLocalVue, but I don't see it in the docs. With a global filter in use, I get the following warning in the console when running…
Harold
  • 845
  • 1
  • 9
  • 17
11
votes
2 answers

How to test VueRouter's beforeRouteEnter using '@vue/test-utils'?

I'm trying to test my 'Container' component which handles a forms logic. It is using vue-router and the vuex store to dispatch actions to get a forms details. I have the following unit code which isn't working as intended: it('On route enter, it…
Zhave
  • 131
  • 1
  • 7
11
votes
3 answers

Testing a Vue component using element-ui component

I have a component that is using an element-ui component. Tree.vue
I want to test the interactivity with the component (for example, to be able to click on one of the el-tree html…
Guy
  • 540
  • 5
  • 14
10
votes
1 answer

vue-test-utils - how to handle $refs?

THE SITUATION I am trying to shallowMount a component, unsuccessfully. The component makes use of $refs to read the height of a div. That value is read inside a computed property. Then in the mounted lifecycle I save that value in the store. The…
FrancescoMussi
  • 20,760
  • 39
  • 126
  • 178
10
votes
2 answers

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.msgTypeContactForm == "success") { …
user762579
10
votes
1 answer

Test navigation guard 'beforeRouteLeave' on vue component

I am currently stuck on unit testing the routing behavior of a vue component with jest. When leaving the component, the 'beforeRouteLeave' navigation guard of Vue-router runs some logic. This guard gets called in my application running in…
mightyI
  • 101
  • 2
  • 4
10
votes
2 answers

Unit testing in vuejs

I am trying to configure/run my first unit test for Vuejs. But I can't get past the configuration issues. I have tried installing the libraries but for some reason I keep getting errors. Here is what an example of my code looks like: My directory…
hidar
  • 5,449
  • 15
  • 46
  • 70
9
votes
4 answers

Combination of Vue 3 + Vuetify 3 + vue/test-utils, results in "Could not find injected Vuetify layout" error

Does anyone know how to do component testing in @vue/test-utils v2 library, while using Vuetify 3 Beta version? I am also using Vue3 composition API to define my components. The documentation that i found here…
Bogdan
  • 372
  • 3
  • 12
9
votes
1 answer

Async lifecycle function in Vue Test Utils

When I tried to test the component which has mounted method like this: mounted(){ this.search() } methods:{ async search(){ try{ await axios.something console.log("not executed only when shallowMount") }catch{} } } I…
Yuta
  • 91
  • 1
  • 3
9
votes
3 answers

Vue unit testing: "You are running Vue in development mode."?

I understand that in your jest.setup.js code, you are supposed to set Vue.config.productionTip = false; Vue.config.devtools = false; and I do. In fact, here is my jest.setup.js code. Notice the console.log('yo ho'); // test/setup.js import Vue…
Greg Veres
  • 1,770
  • 19
  • 28
9
votes
5 answers

How do you open a bootstrap-vue modal with vue-test-utils?

I'm using bootstrap as my design framework and have been using bootstrap-vue. Now I would like to implement some tests to go along with my components. I'm writing a very simple test to make sure a modal is opened. What do I use in vue-test-utils to…
kylerdmoore
  • 93
  • 1
  • 7
9
votes
0 answers

How do I test a vue component that contains a v-text-field Vuetify child component?

I have an "EditableText" component that displays regular text that when clicked converts into a vuetify v-text-input component (kind of like trello's functionality when you edit the title of a card).