问题标签 [vue-test-utils]

所以我们有一个在单个组件中继承的 Vue.js mixin。mixin 有一个由少数组件继承的模板，它可以正常工作。但是，我不知道如何使用 vue-test-utils 测试模板。

这是我正在做的一个简化示例：

当我运行它时，我收到消息：

如果我向已安装的 Vue 组件添加一个渲染函数，它只会渲染我返回的任何标记（如预期的那样）。但是，当没有渲染方法（因此没有模板）时，组件的 html 是未定义的。

问题：

1. 为什么'find'函数找不到mixin的模板？
2. 单独测试mixin是否正确，还是在真实组件中测试更好？

注意：该模板似乎确实存在于 VueComponent 下的包装器中：

我使用 Vue 2、vue-test-utils、jest

用于上传图片的插件是 vue-croppa。

它通过 v-model 安装到我的组件上。然后我可以调用一些方法。

模板

脚本

我也有一些调用 vue-croppa 方法的方法。

我想测试我的方法调用 vue-croppa 方法。

问题是：

在测试中初始化我的组件时，我如何模拟这个插件？并且是否需要测试这种行为？

我有一个 FileForm.vue 组件：-

它包含在 App.vue 组件中：-

现在我正在测试这种行为：-

它将失败，因为最初 FileForm.vue 的输入为空，因此它是数据名称属性，由于 if 块，它不会触发提交操作。因此模拟的 createFile 没有被调用。

如果我能以某种方式设置数据，在这种情况下是触发提交之前 FileForm.vue 的 name 属性，我的测试将通过。像这样的东西： -

但我不能这样做，因为 formWrapper 是 HTMLElement 而不是 Vue 实例。

我的 vue 代码调用element-ui模块：

起初，我的测试是抛出

无法从“test.js”中找到模块“元素”

所以我用

但是它仍然会出错

无法从“test.js”中找到模块“element-ui/lib/theme-default/element.css”

我不知道如何通过这个。

有任何想法吗 ？谢谢。

如果我在 test.js 中导入 element-ui 组件：

（Jest 21.2，vue-test-utils 1.0.0）

在 Vue.js 文档中，有一个自定义输入组件的示例。我试图弄清楚如何为这样的组件编写单元测试。组件的使用看起来像这样

完整的实现可以在https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events找到

文件说

因此，对于要使用的组件v-model，它应该（这些可以在 2.2.0+ 中配置）：

• 接受一个价值道具
• 发出具有新值的输入事件

如何编写单元测试以确保我已编写此组件以便它可以使用v-model？理想情况下，我不想专门测试这两个条件，我想测试当组件内的值发生变化时，它也会在模型中发生变化的行为。

我一直在关注本指南和本指南，使用 webpacker 在 Rails 5.1 上使用 vue-test-utils 和 vue 2 设置玩笑测试。我能够在没有 vue 组件的情况下运行基本测试，但尝试挂载 vue 组件会导致错误：

我的测试文件PostAddress.test.js如下所示：

的相关部分package.json：

该组件本身在浏览器中运行良好（并且很简单）。在我添加语句并尝试挂载/浅化组件 之前，Jest 正在处理一个简单的expect(1 + 1).toBe(2);断言。let

还有什么我需要的吗？第一次使用很多这些工具，所以感谢任何指针！

假设我有以下组件：

测试时，我想确保externalDependency.doThing()调用它bar（来自 vuex 状态），如下所示：

Vue test-utils 有一个 setComputed 方法，可以让我当前测试它，但我不断收到警告说 setComputed 将很快被删除，我不知道还有什么方法可以测试它：

https://github.com/vuejs/vue-test-utils/issues/331

我的组件具有以下计算代码：

现在我正拼命地在我的测试中模拟“root”，但我只是不知道如何。有小费吗？

我正在尝试为 Vuejs 配置/运行我的第一个单元测试。但我无法解决配置问题。我曾尝试安装这些库，但由于某种原因，我不断收到错误消息。

这是我的代码示例：

我的目录结构：

我的文件中的内容

src/components/hello.vue

测试/setup.js

测试/test.spect.js

.babelrc

包.json

最后是我的 webpack.config.js ...

现在，当我npm test从根文件夹运行时，hello/出现此错误：

我不知道为什么会这样。当我最初安装我的 webpack 项目时，我没有使用 npm init 命令安装测试库，因此没有冲突，但我仍然收到该错误：

更新（赏金后）

我只是想测试我的 vuejs 应用程序。希望有茉莉花/业力。如果有人知道如何将这些集成到一个简单的应用程序中并运行第一个测试，我可以从那里得到它。我的问题不是编写测试而是配置它

问题

我正在使用带有路由的 nuxt 1.4 使用 Jest 进行单元测试。我的应用程序不会抛出错误，而且似乎运行良好。但是，当运行我的单元测试npm run unit（运行 jest）时，它会在终端中引发错误：[Vue warn]: Unknown custom element: <nuxt-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

预期的

我希望它不会抛出此错误，因为我的应用程序正在运行。

文件

package.json：

我测试的组件：

我的测试脚本：

我试过了

我尝试创建一个 localVue 并按照此 github 评论中的建议对组件进行存根， 我也尝试过shallow/mount但这似乎也不起作用。