Questions tagged [vue-test-utils]

I have a unique scenario where I need to mock the return value of a custom plugin without importing it directly into my test. By creating a mock function for the plugin, I can easily achieve this goal. However, I am unsure how to change the return value of ...

Not sure if it's a bug or if I'm making a mistake. I attempted to use shallowMount to mount my main App component, but it doesn't seem to work. The error message I receive is: Cannot set properties of undefined (setting 'hasOwnProperty') The error occu ...

Looking for guidance on testing a window scroll event using vue-test-utils. Here is the Javascript code: export default { created () { window.addEventListener('scroll', this.topBResize); }, methods: { topBResize () { var header = doc ...

When my component is mounted, it makes a call to this.axios.get() and passes a vuex-store variable to the API. The API responds with an array, which the component then displays after transitioning from a loading element. In my unit test, I want to simulat ...

In my component, I have a getter called defaultInternalAccountId that I am watching for changes. Whenever this property changes, the method fetchAccount is called. This method is also triggered when the component is mounted. My goal is to write a test that ...

Currently, I am facing an issue while trying to obtain code coverage results for my VueJS frontend application. It seems that when I create a component and write a snapshot test for it, the file is being ignored by WebStorm. After some investigation, I di ...

I am in the process of setting up a test to verify if a function is triggered when a button is clicked onSave (e) { this.$qiwaApi.createDimension() .then(() => {}) .catch(err => this.showSnackbar(err.message))} The focus of my testing is on t ...

I am encountering some challenges testing a Vee-Validate confirmed function on a Vue form that is constructed using Vuetify. The component I am attempting to test has the following structure: <template> <form novalidate ref="loginForm" v-mode ...

I recently created a basic test using Vue Test Utils: import { mount } from '@vue/test-utils' const App = { template: ` <p>Count: {{ count }}</p> <button @click="handleClick">Increment</button> `, data() { ...

I've been working on testing a method call when a component is mounted, but I keep encountering an issue: The mock function was expected to be called once, but it wasn't called at all. Here's the code snippet for the component: <templ ...

I am facing an issue with astrouxds web components in my application. During testing, I am receiving a warning that needs to be resolved. Additionally, I need help on how to properly assert a value in the web component. console.error node_modules/vue/dis ...

One of the components in my codebase is designed to render buttons based on an array of objects as a prop. When these buttons are clicked, an object with specific values is passed to the event handler. Here's an example of how the object looks: { boxes: 1, ...

Trying to check the validity of a label using Jest: <label class="no-content-label" v-if="products.length===0 && !isTableBusy">No Content To Show</label> and here is the test being used: it('Ensuring "No Content To ...

I want to simulate an axios put request in nuxt.js using the following code: The method in the component (Composition API approach): const doSomething = async (): Promise<void> => { const token = $cookies.get("token"); const header ...

Description of the Issue There is an editable div element that receives a default value of an empty string for its content property. Instead of using mustache syntax to display the content like this: {{ content }}, I set the innerText of the element using ...

Learning testing is a new challenge for me, and I'm navigating my way through the complexities of it. Today, I want to create a test for a Vuetify <v-text-field> component with the following structure: <v-text-field v-model="user.captio ...

Utilizing vue-jest for test cases in vue.js2 involves working with a component named Register.vue. The test cases are written in Register.spec.js, and when running npm t, everything is functioning correctly. However, there are some errors being encountered ...

I am currently working on a FileForm.vue component:- <template> <div class="file-form"> <form @submit="submit"> <input v-model="name" type="text" placeholder="File Name" /> <button type="submit"> < ...

Currently, I am in the process of testing Vue 3 components using jest. My main objective is to receive an emit when a button is clicked and then verify if the emitted object corresponds to a custom type that I have defined in a separate file. Below is an e ...

I am currently working on a component with the following structure: <template> <div class="lead-segment"> <div v-html="insuranceType()"></div> </div> </template> <script> import Vue from 'vue'; ...

Update: This post has undergone multiple edits, please refer to this new Stackoverflow post for a clearer explanation of the issue: SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial I have been searc ...

When I use the img tag with a dynamic address filled using require, it works well in the component. However, when I try to write a test for it, an error is thrown. console.error Error: Configuration error: Could not locate module ~/assets/ima ...

I am currently working with Vue JS using @vue/test-utils and jest for my testing. In my tests, I call the following: let localVue = createLocalVue(); vueMount(MyComponent, { localVue: localVue, options }); The issue arises when referencing libraries that ...

I am currently conducting tests on a VueJS 2 application using the vue-test-utils library. I am striving to verify whether the specific component has received the mixin. This involves mounting the component utilizing the mount function and then attempting ...

When running my unit test in Vue, I encounter a warning message that appears not only for <v-col>, but for every Vuetify component: [Vue warn]: Unknown custom element: < v-col> - did you register the component correctly? For recursive compone ...

In order to confirm that our mistakes have been displayed in the bootstrap-vue toast messages, I need guidance on how to validate this during testing. My initial plan was to simulate 'this.$bvToast.toast', but so far I haven't found a suitab ...