包装器不会在 setData 上更新

Question

我有一个简单的 Vue.js 单元测试，它使用 setData 来设置组件的状态。之后，我测试是否显示数据。该组件是一个基于 Typescript class 的组件。

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")
    })
})

测试总是失败。

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 |

组件工作正常，我使用 cypress 测试和手动点击应用程序进行了验证。

Answer 1

当您使用 .text() 时，它会尝试检索 HTML 元素的内部文本。由于 <input /> 不包含任何文本，因此它不会检索任何内容。所以你应该改用input.element.value。

包装器不会在 setData 上更新

Wrapper does not update on setData

javascript

unit-testing

typescript

vue.js

vue-test-utils