Vue Test Utils：如何将 Vuelidate 验证规则传递给子组件？

Question

在尝试使用 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 实例。

到目前为止有人实现了吗？

Answer 1

为了回答您的问题，在我做了一些测试之后，我相信您错过了 mount 内的 data 部分

1. mount：渲染子组件
2. shallowMount：不渲染子组件

MyParentComponent 需要在选项中包含您子组件的结构，因此这就是他返回错误的原因

我看到您直接传递组件的导入，但不要忘记您的测试文件夹位于 src 文件夹之外

从“@/components/ChildA”导入ChildA；

不会工作，而是我建议直接使用绝对路径来导入您的子组件或使用配置来解决它们

    const wrapper = mount(MyParentComponent, {
      data() {
        return {
          value: null
        }
      },
      components: {
        ChildA: () => import('../../src/components/ChildA'),
      },
      validations: {
        value: required
      },
    })