Combining Vue-Test-Utils with TypeScript typings for wrapper.vm

So, I ran into an interesting situation. Has anyone ever worked with typescript + vue-test-utils and attempted to change a value for testing purposes like this: 

wrapper.vm.aCoolRefValueToManipulate = 'something much cooler'
?
I gave it a shot, and it actually worked. However, the ts linter didn't take too kindly to it because it was unfamiliar with aCoolRefValueToManipulate inside vm.

Any ideas on how to resolve this issue?

https://i.sstatic.net/cGGqv.png

The linter provided me with this warning:

Property 'showTopDown' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & Readonly<...> & Sha...'.ts(2339)

Resolution

I received assistance from a helpful individual on the official Vue Discord Server.

(wrapper.vm as any).aCoolRefValueToManipulate
typescriptvue.jsvue-test-utilstypescript-eslintvitest

Answer №1

Is there a different approach to accessing methods of wrapper.vm without using the keyword "any"?

I stumbled upon this alternative method that might work:

interface TestWrapper<T> extends VueWrapper<ComponentPublicInstance & T>
let wrapper: TestWrapper<Partial<{ myMethod: () => void }>>

wrapper.vm.myMethod?.()

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue.js Applications tend to encounter Expected Errors originating from JavaScript

I've been diving into learning Vue.js using Visual Studio 2017. Currently, my goal is to create applications with multiple buttons that trigger the display of a message upon being clicked. However, when I attempt to run this code, I encounter the foll ...

javascriptvisual-studiovue.js

Ensuring the correctness of a date input with v-validate in Vue.js

I need to set a condition where only dates that are equal to or greater than the departure date time field are allowed: <tr v-for="(input,k) in inputs" :key="k"> <datetime name="departureDateTime" v-validat ...

vue.jsvuejs2vue-component

Angular2 encountering a lack of service provider issue

After finding the code snippet from a question on Stack Overflow titled Angular2 access global service without including it in every constructor, I have made some modifications to it: @Injectable() export class ApiService { constructor(public http: Http ...

typescriptangular

The type declaration for the Storage.prototype.setObject method

I'm facing a challenge in creating a d.ts file for the given DOM feature. Storage.prototype.setObject = function(key:string, value:any) { this.setItem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key:string) { var va ...

typescript

Webclipse is having trouble locating a module, despite the fact that Angular CLI is able to

I am facing an issue with my project structure src | +--app | +--components | | | +-component.ts | +--entities | +--entity.ts In entity.ts, I have export class Entity { ... In component.ts, there is an import statement ...

angulartypescriptimportcompiler-errors

How to prevent value overwriting when adding dynamic fields in Angular 7?

In my current project using Angular, I am tasked with setting up configuration using 4 specific fields: Department Name (select option) Service Name (select option) Status (text input) Level (text input). I need to be able to add multiple sets of these ...

angulartypescriptangular7

In React-Native, implement a function that updates one state based on changes in another state

I need to trigger a function when a specific state changes. However, I encountered the error 'maximum update depth reached'. This seems illogical as the function should only respond to changes from stateA to update stateB. I attempted using setSt ...

reactjstypescriptreact-nativereact-hooks

Angular router for displaying multiple view groups

What is the most effective strategy for handling two groups of views in Angular? Let me explain how I typically structure my layout in app.component.html: <app-header></app-header> <router-outlet></router-outlet> <app-footer> ...

angulartypescriptroutes

Issues with utilizing destructuring on props within React JS storybooks

I seem to be encountering an issue with destructuring my props in the context of writing a storybook for a story. It feels like there may be a mistake in my approach to destructuring. Below is the code snippet for my component: export function WrapTitle({ ...

javascriptreactjstypescriptecmascript-6

Setting form values using Angular 9

I am currently facing a challenge that I could use some assistance with. My dilemma involves integrating a new payment system, and I seem to be encountering some obstacles. Here is a snippet of what I have: options: PaystackOptions= { amount: 5000, emai ...

javascriptangularjsangulartypescript

Waypoints unable to display - Google Maps API issue

I am attempting to retrieve the waypoints from an AXIOS call and utilize the response to populate the city into a waypts array. Unfortunately, when I try to include the waypoints in the route, the map only shows the route from the starting point to the des ...

javascriptgoogle-mapsvue.jsaxios

Searching for a method in Vue to monitor values and updates from a distinct component or JavaScript file

I am working with a plain JavaScript file that includes various functions, one of which retrieves a value from either 1. local storage, 2. Vuex, or uses a default value if neither is present. These values can be updated throughout the entire application by ...

vue.js

Enhancing Type Safety in TypeScript with Conditional Typing within Array reduce()

In my codebase, I've implemented a function named groupBy (inspired by this gist) that groups an array of objects based on unique key values provided an array of key names. By default, it returns an object structured as Record<string, T[]>, wher ...

typescripttypescript-genericstypescript-conditional-types

Using Vue's v-if statement to determine if a variable is either empty or null

Using a v-if statement to display certain HTML only if the archiveNote variable is not empty or null. <div v-if="archiveNote === null || archiveNote ===''" class="form-check ml-3" id="include-note-div"> Here is how it's implemented ...

javascriptvue.jsvuejs2vue-component

Show information from the state using React and Typescript

I successfully retrieved data from an API using axios and stored it in the state of my React component. However, I am struggling to display this data on the web so that I can list all the information obtained from the API request. I have tried using the ma ...

typescriptdatabaseapiaxios

Link the chosen selection from a dropdown menu to a TypeScript object in Angular 2

I have a form that allows users to create Todo's. An ITodo object includes the following properties: export interface ITodo { id: number; title: string; priority: ITodoPriority; } export interface ITodoPriority { id: number; name ...

angulartypescript

Sending information to @select of multiselect in Vue.js - vue-multiselect

I'm currently working on passing a parameter to the @select event function in Vue.js HTML <template> <div class="container"> <div v-for="(billItem, k) in billItems" :key="k" > <div class=&q ...

javascriptvue.jsvuejs2vue-componentvue-multiselect

Clicking the button will trigger the onclick event

I'm working on a button component in TypeScript and I have encountered an issue with passing the event to the submitButton function. import * as React from 'react'; interface Props { className?: string; text: string; onClick?(event: Reac ...

javascripttypescripteventsbuttonmouseevent

Is there a way to define one type parameter directly and another type parameter implicitly?

I am currently utilizing a UI-library that offers an API for constructing tables with a structure similar to this: type Column<Record> = { keys: string | Array<string>; render: (prop: any, record: Record) => React.ReactNode; } The l ...

typescripttypescript-generics

Error in TypeScript React: 'Display' property is not compatible with index signature

My design page in React with TypeScript template is using Material UI, with custom styles implemented using the sx prop of Material UI. To customize the styling, I have created a separate object for the properties related to the sx props: const myStyles = ...

reactjstypescriptmaterial-uitypeerror