Bug: Unable to Test element-plus form validation errors #2157
Description
Describe the bug
I'm trying to test a form with validation. Whenever user submits forms and sees element-plus' form validation errors
To Reproduce
ActivityForm.vue
<template>
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<el-form-item id="ac-name" label="Activity name" prop="name" data-label="activity-name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)"> Create </el-button>
<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
interface RuleForm {
name: string
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
name: ''
})
const rules = reactive<FormRules<RuleForm>>({
name: [
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
]
})
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
console.log('submit!')
} else {
console.log('error submit!', fields)
}
})
}
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
}
const options = Array.from({ length: 10000 }).map((_, idx) => ({
value: `${idx + 1}`,
label: `${idx + 1}`
}))
</script>
ActivityForm.spec.ts
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import ElemenPlus from 'element-plus'
import ActivityForm from '../ActivityForm.vue'
describe('ActivityForm', () => {
let wrapper: ReturnType<typeof mount>
beforeEach(() => {
wrapper = mount(ActivityForm, {
global: {
plugins: [ElemenPlus],
stubs: {
teleport: true
}
}
})
})
afterEach(() => {
wrapper.unmount()
})
it('renders activity name error', async () => {
const activityNameContainer = wrapper.get('[data-label="activity-name"]')
const input = activityNameContainer.find('.el-input__inner')
await input.setValue('s')
const btn = wrapper.get('.el-button.el-button--primary.el-button--default')
await btn.trigger('click')
await flushPromises()
expect(activityNameContainer.find('.el-form-item__error').text()).toBe(
'Length should be 3 to 5'
)
console.log(wrapper.vm.$data)
})
})Expected behavior
Should be able to get div with class .el-form-item__error.
The errors are shown in console, but they're not being rendered on dom. (wrapper.html() doesn't show any divs with form errors)
Related information:
npx envinfo --system --npmPackages vue,@vue/test-utils,vitest,jest,element-plus,typescript,jsdom
System:
OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400F
Memory: 5.64 GB / 15.39 GB
Container: Yes
Shell: 5.9 - /bin/zsh
npmPackages:
@vue/test-utils: ^2.4.1 => 2.4.1
element-plus: ^2.3.9 => 2.3.9
jsdom: ^22.1.0 => 22.1.0
typescript: ~5.1.6 => 5.1.6
vitest: ^0.33.0 => 0.33.0
vue: ^3.3.4 => 3.3.4
Additional context