在验证观察者中测试 v-slot答案

【问题标题】：Testing v-slot in validation observer在验证观察者中测试 v-slot
【发布时间】：2020-06-01 01:50:04
【问题描述】：

我遇到了一种情况，我需要检查 v-slot 是否包含 'handleSubmit' 和 'invalid' 。用 jest 写测试用例

<ValidationObserver v-slot="{ handleSubmit , invalid }">
   <form @submit.prevent="handleSubmit(submit)">
         .....
         .....
   </form>
</ValidationObserver>

"vue": "^2.6.10", "@vue/test-utils": "1.0.0-beta.29", "@vue/cli-plugin-unit-jest": "^4.1.2",

Vue.component("ValidationObserver",ValidationObserver)
describe("testing v-slot ,() =>{
test('testing v-slot',() =>{
const wrapper = mount(ComponentName)
expect(wrapper.find(ValidationObserver).______) // not able to fetch v-slot values tried many ways using attributes() method , vm etc.
})
})

对此有什么想法吗？

【问题讨论】：

我正在寻找同样的东西。我认为使用shallowMount 并通过某种DI 机制模拟依赖项会更干净，但不幸的是，vee-validate 中提供的示例和测试都使用mount 并依赖于正在执行的组件代码。

标签： unit-testing vue.js vuejs2 jestjs vue-test-utils

【解决方案1】：

我也遇到过这个问题。据我所知，用实际组件存根 ValidationObserver 和 ValidationProvider 效果很好。

例子：

const wrapper = shallowMount(ComponentName, {
  stubs: {
    ValidationObserver,
    ValidationProvider,
  },
})

【讨论】：