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>
答案 0 :(得分:0)
我无法使用 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.')
})