Vue Test Utils:如何将 Vuelidate 验证规则传递给子组件?
P粉590428357
P粉590428357 2024-03-26 16:07:20
[Vue.js讨论组]

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

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

P粉590428357
P粉590428357

全部回复(1)
P粉649990163

为了回答您的问题,在我做了一些测试之后,我相信您错过了 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
      },
    })
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号