Vue Test Utils: Wie übergebe ich Vuelidate-Validierungsregeln an untergeordnete Komponenten?

Question

Als ich versuchte, mit vue test utils 编写 component test die Interaktion zwischen einer untergeordneten Komponente und anderen Inhalten zu testen, blieb ich aufgrund der Verwendung von Vuelidate in der untergeordneten Komponente hängen. Hier ist ein vereinfachtes Beispiel:

// 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
   },
   ...
})

Ich versuche eine Lösung zu finden, die Unterkomponenten und ihre jeweiligen Vuelidate-Validierungsregeln installieren kann (beachten Sie, dass ich auch Unterkomponenten installieren möchte, daher ist shallow-mount nicht das, wonach ich suche), aber ich habe noch keine Lösung gefunden .

Stattdessen ergab mein Test den folgenden Fehler:

Cannot read property `value` of undefined

Dies ist sinnvoll, da der Test keinen Zugriff auf die $v Instanz der untergeordneten Komponente hat.

Hat es bisher schon jemand umgesetzt?

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
      },
    })