Using Vue test-utils and jest to test the value of a specific input element

Question

Using Vue test-utils, I'm needing to test the value of a specific input element which is populated via a prop. I've figured out how to find the element using it's id:

  it("Address should render Street 1", () => {
     const street1 = wrapper.find('#street1')              // this works
     expect(street1).toEqual('223 Some Street Rd')         // nope
     expect(street1.text()).toEqual('223 Some Street Rd')  // seemed good at the time
     expect(street1.value()).toEqual('223 Some Street Rd') // grasping at straws - no love 
  });

but I've not been able to figure out how to access the "value" of the input.

Any help is appreciated in advance

Answer 1

I am assuming your component looks something like this:

 <input id="street1" type="text" v-model="street1" >

then you can try

   expect(street1.element.value).toEqual('223 Some Street Rd');

E.g.

import { mount } from "@vue/test-utils";
import Input from "./Input";

describe("Input", () => {
  const mountInput = (propsData = {}) => {
    return mount(Input, {
      propsData
    });
  };

  it("Address should render Street 1", () => {
    const wrapper = mountInput();
    const street1 = wrapper.find('#street1') 
    expect(street1.element.value).toEqual('223 Some Street Rd');
  });
});