Typescript error with wrapper.find('select').element.value

[Mnigos]

Hello, I'm using typescript and got error
Property 'value' does not exist on type 'HTMLElement'.ts(2339) any
Here is my test

  it('Should write a login', async () => {
    const wrapper = shallowMount(LoginForm)
    const input = wrapper.find( '[data-test="nameOrEmailInput"]')
    await input.setValue('User123')

    expect(wrapper.find('input#input-20').element.value).toBe('User123')
  })

[standbyoneself]

Property value really does not exist on type HTMLElement. You need to make thing called "type casting" / "type assertion".

wrapper.find() returns a {Wrapper} and an element property of it basically has type HTMLElement. If you target an input you need to manually assert it to the HTMLInputElement interface which contains a value property (HTMLInputElement on MDN)

expect((wrapper.find('input').element as HTMLInputElement).value).toBe(...)

Type Assertion in Typescript Documentation

[lmiller1990]

I think find can take a generic: wrapper.find<HTMLInputElement>. If not, we should update the types - we have this generic in V2 of this library, but sine V1 is written in JS (with flow), the types are not as good as they probably can be.

[standbyoneself]

@lmiller1990,
VTU 1 actually doesn't have an overloaded find() with a string selector that can take a generic

  find<R extends Vue> (selector: VueClass<R>): Wrapper<R>
  find<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
  find<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
  find (selector: string): Wrapper<Vue>
  find (selector: RefSelector): Wrapper<Vue>
  find (selector: NameSelector): Wrapper<Vue>

[lmiller1990]

find for components is deprecated, we have findComponent. Anyway, if you'd like to update the types to include something like:

find<Element> (selector: string): Wrapper<Element>

That would improve the types and your problem. For some inspiration, check the types in V2, which are really well defined (since the entire code base is written in TypeScript).