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
173
votes
20 answers

How to mock window.location.href with Jest + Vuejs?

Currently, I am implementing unit tests for my project and there is a file that contains window.location.href. I want to mock this to test and here is my sample code: it("method A should work correctly", () => { const url =…
Hoang Subin
  • 6,610
  • 6
  • 37
  • 56
60
votes
1 answer

How to Unit Test a Method in a Vue.js Component using jest

I'm trying to unit test a component method. The question here does not lay out how to access the component method from a unit test. Specifically, given my Vue component below, how do I access doSomeWork() from my unit test? Vue…
jeffcodes
  • 726
  • 2
  • 8
  • 20
44
votes
4 answers

Vue-Test-Utils Unknown custom element:

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 code looks a little funky, it's because I'm using…
Chad Carter
  • 1,938
  • 2
  • 16
  • 16
32
votes
1 answer

The difference between Vue-Test-Utils' "mount" and "shallowMount"?

Disclaimer: I am pretty new to Vue, JavaScript, and web frameworks in general. I'm trying to familiarise myself with some basic unit and component tests using Jest and vue-test-utils. I have read the docs on vue-test-utils' mount() and…
AnonymousAngelo
  • 996
  • 3
  • 15
  • 37
32
votes
9 answers

[Vue warn]: Unknown custom element: - When running jest unit tests

Problem I'm using nuxt 1.4 with routing using Jest to do unit testing. My application doesn't throw errors and seems to work perfectly. However when running my unit test npm run unit (which runs jest) it throws an error in the terminal: [Vue warn]:…
Anima-t3d
  • 3,431
  • 6
  • 38
  • 56
28
votes
3 answers

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 have run into a roadblock in regards to adding…
J Dawg
  • 525
  • 1
  • 5
  • 14
26
votes
4 answers

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: { bar () { …
yxu296
  • 379
  • 1
  • 6
  • 13
25
votes
2 answers

Setting up Vue computed properties for unit tests with vue-test-utils

vue-test-utils provides a setComputed method that allows you to set the state of a computed property. import { mount } from '@vue/test-utils' const wrapper = mount(Home) wrapper.setComputed({loaded: true}) vue-test-utils version 1.1.0.beta is…
Harold
  • 845
  • 1
  • 9
  • 17
25
votes
5 answers

VueJS - Unit testing with vue-test-utils gives error - TypeError: _vm.$t is not a function

Relatively new to Vuejs and testing its components. Using vue-test-utils and jest for testing. Getting following error test log The .vue file consists of template, component and styling. Below is the part of the SignupLayout.vue that gets error -…
Karan Rao
  • 295
  • 2
  • 4
  • 7
22
votes
2 answers

How to add Vue Test Utils with Jest to already existing Vue-CLI 3 project?

I want to test an already existing Vue-CLI 3 project. I haven't initialized the testing preset when I was creating the project. I have searched, but haven't found any suitable results. I read the documentation also, but it said to add testing when…
Lucifer
  • 1,069
  • 4
  • 16
  • 26
21
votes
4 answers

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-jest babel-core@bridge > $ npm i -D @babel/core…
김은솔
  • 211
  • 1
  • 2
  • 3
18
votes
4 answers

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 the basic example in the docs : import { mount }…
Pierre_T
  • 1,094
  • 12
  • 29
18
votes
4 answers

Vue test utils is updating the component data but not re-rendering the dom

I'm trying to test the template of my Vue app after making an ajax request which is changing one variable of the component' data. This variable (books) is use to conditional render the gallery CONTEXT: I want to create a gallery in order to show the…
Fran Roa Prieto
  • 385
  • 1
  • 3
  • 12
18
votes
2 answers

How to trigger an event in stub? [vue-test-utils]

I'm trying to test a component event like this: // template:
const save = jest.fn() const wrapper = mount(MyComponent, {methods: { save }}) wrapper.find('form').trigger('submit.prevent') expect(save).toBeCalled()…
Daniel
  • 567
  • 6
  • 20
18
votes
2 answers

vue-test-utils: How to test logic within mounted() lifecycle hook (with vuex)?

I'm trying to write a unit test for the logic within Vue's mounted() lifecycle hook, but not having much luck. The problem seems to be that mounted() never gets called when the component is mounted using vue-test-utils mount. Here's the Vue…
cmasri
  • 461
  • 1
  • 5
  • 12
1
2 3
54 55