Wrapper does not update on setData

Question

I have a simple Vue.js unit test, that uses setData to set the state of a component. After that, I test if the Data is displayed. The Component is a Typescript class based component.

describe("EditSite.vue", () => {
    it("shows the correct data on load", async () => {
        const wrapper = mountEditSite(editSiteHttpOkMockRequestHandler);
        await wrapper.setData({
            id: 1,
            form: {
                owner: "emilia",
                status: "new",
                fqdns: [new Fqdn("www.emilia.us")]
            },
            banners: {
                submitFailure: false,
                submitSuccess: false,
                incompleteForm: false
            }
        })
        await wrapper.vm.$nextTick()
        await wrapper.vm.$forceUpdate()
        const owner = wrapper.find("#site-owner-input")
        expect(owner.text()).toContain("emilia")
    })
})

The test always fails.

expect(received).toContain(expected) // indexOf

    Expected substring: "emilia"
    Received string:    ""

      43 |         await wrapper.vm.$forceUpdate()
      44 |         const owner = wrapper.find("#site-owner-input")
    > 45 |         expect(owner.text()).toContain("emilia")
         |                              ^
      46 |     })
      47 | })
      48 | 

The Component is working correctly, I verified that using cypress tests and manual clicking through the application.

Answer 1

When you use .text() it tries to retrieve the inner text of an HTML element. As <input /> does not surround any text it won't retrieve anything. So you should use input.element.value instead.