【问题标题】：How can I create an unit test to an v-alert from Vuetify?如何为 Vuetify 的 v-alert 创建单元测试？
【发布时间】：2021-05-20 17:29:51
【问题描述】：

问题

Jest 正在返回整个 Vuetify 组件，我无法仅获取内容

问题

如何为 Vuetify 的 v-alert 创建单元测试？

我的目标

我想获取警报的内容文本并测试此警报文本是否正确

代码

测试

fit('should show error message if username or password are not present', () => {
        const { getByTestId } = renderComponent()
        const alert = getByTestId('alert')
        const loginButton = getByTestId('login-button')
        userEvent.click(loginButton)
    
        // const alert = screen.getByText('Insira seu Login e Senha.')
    
        expect(alert).toBe({})
      })

结果

      - Expected  -  1
    + Received  + 22

    - Object {}
    + <div
    +   class="v-alert v-sheet theme--dark v-alert--dense v-alert--text error--text"
    +   data-testid="alert"
    +   role="alert"
    +   style="display: none;"
    + >
    +   <div
    +     class="v-alert__wrapper"
    +   >
    +     <i
    +       aria-hidden="true"
    +       class="v-icon notranslate v-alert__icon mdi mdi-alert theme--dark error--text"
    +     />
    +     <div
    +       class="v-alert__content"
    +     >
    +       
    +     
    +   
    +     </div>
    +   </div>
    + </div>

【问题讨论】：

标签： testing jestjs nuxt.js vuetify.js

【解决方案1】：

我不能使用 testing-library 来执行此操作，我使用 vue-test-utils 执行此操作更复杂，但可以。

挑战

如果有人可以使用testing-library 解决问题，请在此处回答。

解决方案

it('should show error message if username or password are not present', async () => {
    const wrapper = mount(Form, {
      localVue,
      vuetify,
    })

    const loginButton = wrapper.find('[data-testid="login-button"]')
    loginButton.trigger('click')
    await Vue.nextTick()

    const alertMessage = wrapper.find('.v-alert__content')

    expect(alertMessage.text()).toBe('Insira seu Login e Senha.')
  })

【讨论】：