在尝试使用 vue test utils
编写 component test
时,测试子组件和其他内容之间的交互,由于子组件中使用了 Vuelidate,我陷入了困境。下面是一个简化的示例:
// parent component code <template> <div> <childA /> </div> </template>
//childA code <template> <input v-model="value" /> </template> <script> ... validations: { value: { required } } ... </script>
// parent component test ... const wrapper = mount(MyParentComponent, { ..., components: { childA, }, validations: { value: required }, ... })
我试图找到一个可以安装的解决方案(请注意,我还想安装子组件,因此 shallow-mount
不是我所寻找的)子组件及其各自的 Vuelidate 验证规则,但我还没有找到任何解决方案。
相反,我的测试给出了如下错误:
Cannot read property `value` of undefined
这是有道理的,因为测试无法访问子组件的 $v
实例。
到目前为止有人实现了吗?
为了回答您的问题,在我做了一些测试之后,我相信您错过了
mount
内的data
部分mount
:渲染子组件shallowMount
:不渲染子组件MyParentComponent
需要在选项中包含您子组件的结构,因此这就是他返回错误的原因我看到您直接传递组件的导入,但不要忘记您的测试文件夹位于
src
文件夹之外从“@/components/ChildA”导入ChildA;
不会工作,而是我建议直接使用绝对路径来导入您的子组件或使用配置来解决它们