VUE测试UTILS：如何将Vuelidate验证规则传递给儿童组件？

Question

在尝试通过使用 vue test utils ，测试儿童组件和其他内容之间的互动来编写组件测试时，由于儿童组件中的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
   },
   ...
})

我试图找到可以安装的解决方案（请注意，我也想安装子组件，因此 shack> shallow-mount 不是我想要的）儿童组成部分，具有各自的Vuelixed验证规则，但我仍然没有找到任何解决方案。

取而代之的是，我的测试给了我类似的错误：

Cannot read property `value` of undefined

这很有意义，因为该测试无法访问子组件的 $ v 实例。

到目前为止有人取得了成就吗？

Answer 1

要回答您的问题，并且在进行了一些测试之后，我相信您错过了数据 Mount

1. mount ：渲染子组件
2. shallowmount ：不会渲染子组件

myParentComponent 需要在选项中具有您的子女组件的结构，所以这就是为什么他正在返回错误

，我看到您'重新传递组件的导入，但不要忘记您的测试文件夹不在您的 src 文件夹

从“@/components/childa”;

不将不会相反，我建议直接使用绝对路径来导入您的孩子组件或使用配置来解决它们

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