Hỏi về viết Unit test trong Vue3 + Vuetify

hoalaxanh123 · October 18, 2022, 3:53am

Hi mọi người,
Mình đang học Vue, cụ thể là Vue 3 và sử dụng UI là Vuetify 3. Unittest mình dùng Vue Test Utils.

<v-text-field
prepend-inner-icon="mdi-email"
label="Email"
v-model="email"
data-testid="register_email-input"
></v-text-field>

Đây là khi nó render ra, data-testid của mình nó ở ngoài, không nằm ở input tag mà nằm trong 1 loạt components khác.

Mình đang muốn viết test khi user nhập vào valid mail. Nút submit sẽ được enable (disable by default)

  it('User provide valid email', async () => {
    const wrapper = mount(LearnTestComponent, {
      props: {}
    })
    const submitBtn = wrapper.find('[data-testid="register_createAccount-btn"]')
    const emailField = wrapper.find('[data-testid="register_email-input"]')
    const inputField = emailField.find("input[type='text']")

    expect(submitBtn.element.disabled).toBe(true)

    // Input valid mail
    await inputField.setValue('[email protected]')

    expect(submitBtn.element.disabled).toBe(false)
  })

Nhưng nó vẫn fail, mình chưa thạo đoạn này lắm. Nếu dùng trực tiếp thẻ input thì ok nhưng dùng với Vuetify cụ thể là v-text-field thì không được. Mình nghĩ mình sai cú pháp. Mình có tìm doc hoặc tài liệu liên quan nhưng chưa thấy. Mọi người có thể góp ý mình được không?

Cảm ơn cả nhà.

hoalaxanh123 · October 18, 2022, 3:48am

Chà, mình hiểu rồi, tớ đọc được ở đây

Notice when we call setValue and trigger , we are using await . This is why we had to mark the test as async - so we can use await .

Mình sửa lại rằng:

...
    inputField.element.value = '[email protected]'
    await inputField.trigger('input')

    await wrapper.vm.$nextTick() // "Wait for the DOM to update before continuing the test"
...