Newest 'vue-test-utils' Questions - Stack Overflow

Questions tagged [vue-test-utils]

Helpers to render VueJS components in unit tests.

0
votes
0answers
15 views

Checking class updates after button is clicked

I am trying to get to grips with vue test utils I have a hamburger menu with an even handler, the state is stored in my vuex instance. When clicked the button adds an 'is-active' class. I suppose ...
0
votes
0answers
32 views

How to manually update vue computed property in test

I have a component Foo with Vuex binding mockedVuexBinding (which is essentially a computed prop). I want to keep tests simple and don't want to mock the whole store. All vuex bindings I just ...
0
votes
1answer
26 views

Find the nth element in vue-test-utils

I'm using vue-test-utils with jest. My wrapper contains 9 input elements an I'd like to get the third one. This solution works: wrapper.findAll('input').at(3) // OK According to documentation (...
1
vote
1answer
29 views

Vue testing: shallowMount & localVue produce error on second run of identical test. Are they not pure functions?

So I am trying to set up some unit tests for my app, and I am running into the following issue. Running the exact same test produces an error in shallowMount the second time. I can tell from the ...
1
vote
0answers
23 views

Unknown custom element: <svgIcon>

I am running a nuxt app and testing with vue-test-utils and jest. The issue I get is that certain modules that are installed but certain components like <nuxt-link> or <svg-icon> are ...
0
votes
0answers
38 views

Mock javascript function imported from vue

I'm trying to set up tests for a vue component collector which is importing a Javascript module to collect some data. components/collector.vue <script> import dataService from '@/services/...
0
votes
1answer
22 views

Testing vue-apollo using vue-test-utils

I am new to testing and GraphQL. I am trying to test my VueJS app which uses GraphQL using vue-test-utils and jest. I have a component which gets the categories from a graphql server in mounted hook. ...
1
vote
1answer
22 views

How to test a custom directive from another module in a component

I have a UI library that we import into our app. In the UI library is a custom directive, toggle, that we use for opening and closing a modal. When I run unit tests, I get this error: [Vue warn]: ...
0
votes
2answers
35 views

Getting [Vue warn]: Unknown custom element: <b-modal> even though bootstrap-vue is registered

A BootstrapVue b-modal component in a custom Vue component loads correctly in the browser. However, when testing using mocha+mochapack, it generates a Vue warning that the b-modal element is not ...
0
votes
1answer
15 views

Vue how to test component with slot and slot-props

I want to test this FooComponent: <div> <slot :fn="internalFn" /> </div> It's used like that (ParentComponent): <FooComponent> <template slot-scope="slotProps"> ...
0
votes
1answer
39 views

How to test this component?

I have a Page level component which implements a component BookingInformation with slots. In the Page component, it's got another component BookingInformationHeader with slots. header and default. ...
0
votes
0answers
22 views

Test a drag and drop user action in vue-test-utils

I want to test the user interaction of drap & drop on a DOM element. Vue test utils provides the trigger method which accepts eventType (e.g. click) as parameter e.g. wrapper.find('#someId')....
2
votes
1answer
51 views

How do I properly mock a DOM so that I can test a Vue app with Jest that uses Xterm.js?

I have a Vue component that renders an Xterm.js terminal. Terminal.vue <template> <div id="terminal"></div> </template> <script> import Vue from 'vue'; import { ...
0
votes
0answers
18 views

Unable to stub component on routing from shallow Mounted component ( routed component has nested components)

I am testing a component which routes to a component dynamically. But the problem is routed component has nested components which I am unable to stub in routing component. And its throwing errors I ...
1
vote
0answers
23 views

Vue Test Utils - Await promises for vee-validate tests taking increasingly long

Our test suite includes a bunch of tests that ensure that out form vee-validate messages are displaying. To do this we create a wrapper: wrapper = shallowMount(SetPasswordForm, { i18n, ...
0
votes
0answers
21 views

Read class of nested child component in VueJs when shallowmount the component

As I am using virtual list from this dependency. It is running successfully. But when I try to write test case using Vue-test utils, it fail to read class of child dom. In this case I won't be able ...
0
votes
0answers
10 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> &...
0
votes
1answer
38 views

How can I trigger the 'blur' event while testing a vuejs component?

I'm writing test on a vue component that must call a method when focus is lost. According to vue-test-utils I should use wrapper.trigger('blur'). But the method is not fired. I suspect that blur isn'...
2
votes
2answers
83 views

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 ...
0
votes
0answers
19 views

How to test weather click event is triggered on the <el-button> with vue-test-utils?

I'm writing a project with vue cli3 and element-ui,And i want to add unit test for my .vue files and .js files. I have bind a click event openDialog on the <el-button>, So i want to test if this ...
1
vote
0answers
40 views

jest Unexpected token Import when semicolons are appended to import statements

using the vue-cli v3 and adding unit testing and using jest if you append semicolons to the end of import statements jest throws an error Unexpected token import but when there are no semicolons ...
0
votes
0answers
34 views

Unable to mock $root.$refs while unit testing Vue component

I have a component where im using reference of $root in its mounted hook. //here's mounted of my Vue component mounted() { this.$root.$refs.myRef.show() } here is the test case it('test mount', ...
2
votes
0answers
48 views

How to mock vue router in a Vuex store test with Jest?

I have a vuex store like this: // store.js import Vuex from 'vuex' import router from '../router' // this is a vuejs router export const actions = { async load({ dispatch, commit }) { if (...
0
votes
0answers
15 views

Test component method called from emitted event

A custom event attached to a child component is triggered by a native input event. The method it's calling maps user's field transformations. In this case, the user inputs text and can elect to "...
0
votes
1answer
70 views

Testing with `Created` hook with `vue-test-utils` and `jest`

I have a Vue page like this: <template> </template> <script> created(){ this.doSomething(); } methods: { doSomething() { ..... } } </script> Now, we ...
0
votes
1answer
30 views

Can we modify Vuex action for jest unit testing?

I've created a store in my test file import { shallowMount, createLocalVue } from '@vue/test-utils' import Vuex from 'vuex' import Actions from '../../../src/components/Actions' const localVue = ...
0
votes
1answer
67 views

How to fix jest error : TypeError: $ is not a function

I am writing unit test cases for vuejs component. When I am trying to shallowMount component using vue-test-util I'm getting error: TypeError: $ is not a function at VueComponent.mounted (src/...
0
votes
0answers
26 views

Vue Test Utils, Keydown event no longer triggered by keyCode in test

In test environment, keydown event no longer triggered by keyCode after updated vue-test-utils to version 1.0.0-beta.26 or above, example: Vue <div @keydown="onKeydown"></div> Scripts ...
0
votes
1answer
33 views

Code coverage ignoring VueJS component files despite tests being successfully run for those components

I am trying to get the code coverage results for my frontend application, built in VueJS. Apparently, if I create a component and then write a test (snapshot test) for that component, the IDE (...
2
votes
1answer
75 views

How to mock window.google in a vue.js unit test

I am trying to test a vue component that displays a google map The google include script element is somewhere in a parent component and the component I am trying to test gets is reference to it ...
0
votes
1answer
24 views

How should I correctly trigger a change event to fire a function in unit test?

I have a checkbox component and due to a Safari bug, I changed the @input=input() to @change='input' because Safari does not have an input event. checkbox <template> <div class="...
2
votes
1answer
128 views

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 ...
1
vote
0answers
26 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 ...
0
votes
0answers
13 views

Correct way to organize data in Vue + Jest unit tests

let's assume we have a e-commerce page with 15 elements which is looped inside of children. What would be the right way to test it? Is it correct to copy and paste real Vuex state data object as a ...
0
votes
0answers
19 views

How to test vuex store file?

Here I have written my vuex store file for state management. But I don't know how to test this file. products.js import products from '../api/products'; export function getProductById (products, id) ...
1
vote
1answer
52 views

Installing jest & vue test utils manually no - trouble with import

I am trying to install vue-test-utils and jest in a project. It is vue-cli project but I did not setup the testing when I ran it initially. It finds the test but fails on the import statements. ...
0
votes
0answers
21 views

How to run only the snapshot tests of a Vue project

I implemented unit and snapshot tests for my Vue.js project. Now I want to run unit and snapshot test separately (to integrate them into separate gitlab CI jobs). By runing the following command both ...
0
votes
0answers
54 views

setData of vue-test-utils not re-updating the component

I'm using vue-test-utils with jest, I have router-link being rendered in a Login Component. I'm passing router to the component as well. There is data called 'email', on its update forgot link get's ...
0
votes
0answers
7 views

How to configure jest to run the different setup file during testing files in the different folder?

This is my structure: tests/unit ├── components │ ├── Form.spec.js │ ├── Hamburger.spec.js │ └── Table.spec.js ├── setup.js └── vuex └── mutations.spec.js Here is jest.config.js: module....
1
vote
2answers
140 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 ...
1
vote
1answer
61 views

How to mock a component method?

I'm simply trying to find out if a component method has been called after a store action, but I'm getting this error: expect(jest.fn())[.not].toHaveBeenCalled() jest.fn() value must be a mock ...
1
vote
1answer
121 views

How to trigger a window event during unit testing using vue-test-utils

I've added 'attachToDocument', but I still can't trigger a keyup event on window. my dependencies' version: "@vue/test-utils": "^1.0.0-beta.29" "vue": "2.5.18" <template lang="pug"> div h1 ...
0
votes
0answers
49 views

Can't locate v-btn while shallow mounting a component

I have created a project in vuetify and now trying to unit test it using jest. I have button that I have created using v-btn, which toggles the value of a boolean variable. To check whether the ...
0
votes
0answers
44 views

Triggered event on b-button doesn't show on wrapper.emitted()

I'm new to testing vue components and right now I'm trying to test that clicking a b-button component trigger an event and calls a method. The test seems to fail because the 'click' event doesn't get ...
0
votes
1answer
35 views

vue test utils TypeError: this.$moment(…).format is not a function

I am using moment.js and am having trouble mocking the format function am recieving this error: TypeError: this.$moment(...).format is not a function could any one point me in the right direction on ...
0
votes
1answer
65 views

How to find elementUi's componets during unit testing using vue-test-utils's with shallowMount?

After reading vue-test-utils's document, I am trying to hand on. Hope someone can clear my confusion. import { mount, shallowMount } from '@vue/test-utils' import Vue from 'vue' import Form from '@/...
1
vote
1answer
224 views

How to solve 'SyntaxError: Unexpected identifier' while testing vuetify components using jest

I have written many components in vuetify that are reusable. I am using jest testing framework for unit testing. When I run 'npm run test', the test fails with 'SyntaxError: Unexpected identifier'. ...
1
vote
1answer
62 views

“TypeError: Cannot read property 'content' of null” Running in Jest

I have a problem if I run my jest test suite. Site note, I'm using vue-test-utils. My vue data looking like this: data() { return { token: document.head.querySelector('meta[name="csrf-token"...
0
votes
0answers
192 views

Vue/Vuex/Vuetify Actions mock not being called using Jest

I'm simply trying to test whether a Vuex store action has been dispatched or not. I have tried using jest.spyOn, mocking the action as described in https://vue-test-utils.vuejs.org/guides/#testing-...
0
votes
0answers
61 views

How to test more than 2 components using VeeValidate?

When I try to test 2 components (with 2 different test files), just the first file will pass. The second will fail with [Vue warn]: Error in directive validate bind hook: "TypeError: Cannot read ...