jest+vue-test-utils实战

validate.js中部分

function validateChar50(rule, value, callback){
  if (value && !/^(.|\n|\r){1,50}$/.test(value)) {
    callback(new Error('最长允许50个字符!'))
  }
  callback()
}

validate.test.js

import {mount,createLocalVue, shallowMount} from '@vue/test-utils'
import ElementUI from 'element-ui';
const localVue = createLocalVue()
localVue.use(ElementUI)
import {
    validateChar50,
    validateChar300,
    validateUserName,
    validatePassWord,
    validateCellphone,
    validatePassport,
    validateIdentityCard,
    validateIPAddr,
    validateServerPort,
    validateRealName,
    validateDeptName
  } from '@/util/validate.js'

let createComponent = (injectTemplate, rules) => {
  rules = rules? rules: {
    'formItemInput': [
      { validator: () => {}, trigger: 'blur' }
    ]
  }
  injectTemplate = injectTemplate ? injectTemplate: `<el-input v-model="ruleForm.formItemInput" autocomplete="off"></el-input>`
  
  return{
    template: `
      <el-form :model="ruleForm" ref="ruleForm"  label-width="100px" :rules="rules">
        <el-form-item label="输入"
          prop='formItemInput'
        >
          ${injectTemplate}
        </el-form-item>
        <el-form-item>
          <el-button class="submit" type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button class="reset" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    `,
    data() {
      return {
        ruleForm: {
          formItemInput: ''
        },
        result: false,
        rules
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.result = true
          } else {
            this.result = false
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
}
let mycomponent = createComponent()
let wrapper =  mount(mycomponent,{
  localVue
})
describe('validateChar50 function test',  () => {
  let btn = wrapper.findAll('button').at(0)
  let input = wrapper.findAll('input').at(0)
  let rules = {
    'formItemInput' : [{validator: validateChar50, trigger: 'blur'}]
  }
  wrapper.setData({rules})
  
  test(' Test that if the string of input value is an empty string,the result should be true', async () => {
    let formItemInput = ''

    await input.setValue(formItemInput) 
    await wrapper.vm.$nextTick()
    await btn.trigger('click')
    expect(wrapper.vm.result).toBeTruthy()
  })

  test(' Test that if the string length of input value is 1 ,the result should be true', async () => {
    let formItemInput = '2'

    await input.setValue(formItemInput) 
    await wrapper.vm.$nextTick()
    await btn.trigger('click')
    expect(wrapper.vm.result).toBeTruthy()
  })

  test(' Test that if the string length of input value is 50,the result should be true', async () => {
    let formItemInput = '3'.repeat(50)

    await input.setValue(formItemInput) 
    await wrapper.vm.$nextTick()
    await btn.trigger('click')
    expect(wrapper.vm.result).toBeTruthy()
  })

  test(' Test that if the string length of input value more than 50,the result should be false', async () => {
    let formItemInput = '4'.repeat(51)
   
    await input.setValue(formItemInput) 
    await wrapper.vm.$nextTick()
    await btn.trigger('click')
    expect(wrapper.vm.result).toBeFalsy()
  })
})
  

跑了下：

 PASS  test\unit\specs\validate.test.js
  validateChar50 function test
    √  Test that if the string of input value is an empty string,the result should be true (7ms)
    √  Test that if the string length of input value is 1 ,the result should be true (8ms)
    √  Test that if the string length of input value is 50,the result should be true (33ms)
    √  Test that if the string length of input value more than 50,the result should be false (32ms)