我如何模拟这个Vue注入？
要模拟Vue注入，你可以使用Vue Test Utils和Jest等工具来进行单元测试和模拟。
- 首先，确保已经安装了Vue Test Utils和Jest。
- 创建一个Vue组件，假设组件名为MyComponent，其中包含需要注入的Vue实例。
// MyComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
}
}
</script>- 在单元测试文件中，导入Vue Test Utils和Jest，并模拟Vue注入。
// MyComponent.spec.js
import { shallowMount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent', () => {
it('renders the message', () => {
const wrapper = shallowMount(MyComponent, {
mocks: {
$t: () => 'Translated Text',
$i18n: {
locale: 'en'
}
}
})
expect(wrapper.text()).toBe('Hello, Vue!')
})
})在上述代码中，使用shallowMount方法来创建一个浅渲染的组件实例。在options的mocks属性中，可以模拟注入Vue实例中的各种属性和方法。在这个例子中，我们使用了两个常见的注入，即$t和$i18n，分别用于国际化文本和语言设置。你可以根据需要添加更多的注入。
这样就可以进行Vue组件的单元测试，并模拟Vue注入。当运行测试时，Jest会执行该测试用例并断言期望的输出是否与实际输出一致。
请注意，这里只是简单地示范了如何模拟Vue注入，并非涵盖所有的注入方式和场景。根据你的实际需求，可以灵活地使用Vue Test Utils和Jest等工具来模拟各种注入场景。
推荐的腾讯云相关产品：腾讯云函数（云原生Serverless计算服务） - https://cloud.tencent.com/product/scf
相关·内容
项目：
我有一个用vue CLI生成的Vue.js应用程序。为了从我的测试服务中获取一些异步数据，我只稍微编辑了HelloWorld组件，您可以在这里看到：
<template>
<h1>{{ message }}</h1>
</template>
<script>
import service from './test.service'
export default {
name: 'HelloWorld',
created () {
service.ge
浏览 2提问于2017-10-19得票数 4
回答已采纳
我正在使用vue- test -utils中的挂载()，它有一个导入服务的组件，这些服务应该在单元测试中进行模拟。
我看到挂载()有一个模拟选项，但是试图将中给出的示例推断到注入服务的场景是逃避的。
mount(Component, {
mocks: {
...?
}
})
组件简单地导入服务，这是简单的JS。
import DataService from '../services/data.service'
我可以使用注入加载程序让它工作，在这里详细介绍了。
运行的代码
const MyComponentInjector = require('!!v
浏览 2提问于2017-10-03得票数 5
回答已采纳
2回答
假设我有一个非常基本的vue-class-component，如下所示：
<template>
<div>Nothing of interest here</div>
</template>
<script>
import Vue from 'vue';
import Component from 'vue-class-component';
import http from './../modules/http';
@Component
浏览 1提问于2017-11-21得票数 1
回答已采纳
3回答
我正在学习TDD，同时构建我的Vue应用程序，并试图遵守严格的规则，只编写足够的生产代码来满足失败的单元测试。我真的很喜欢这种方法，但在向Vue实例添加方法和测试事件从模板中的元素触发时是否调用了这些方法时，遇到了一个障碍。
对于如何模拟Vue方法，我找不到任何建议，因为如果我模拟代理方法，它就不会被调用(我使用Jest和Vue Test Utils)。
我也在使用Cypress，所以我可以在e2e中填写这个测试，但我希望能够尽可能多地使用单元测试。
我拥有Edd所著的“测试Vue.js应用程序”一书，但在关于测试组件方法的一节中，他只说明了以下几点：
通常，组件在内部使用方法。例如，单击按
浏览 1提问于2018-12-16得票数 27
回答已采纳
1回答
<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {Action, Getter, namespace} from 'vuex-class';
import {User} from '@/types/userTypes';
const userModule = namespace('user');
@Component({
name:
浏览 1提问于2019-12-09得票数 3
4回答
我正在测试一个使用Axios的登录组件。我试着用axios-mock-adapter来模拟Axios，但是当我运行这些测试时，仍然会出现以下错误：
Error: Request failed with status code 404
如何在我的测试中正确地模拟Axios？
login.spec.js：
import Vue from 'vue'
import { shallowMount, createLocalVue } from '@vue/test-utils';
import Login from '../../src/components/gl
浏览 1提问于2019-03-25得票数 16
回答已采纳
我想用vue创建简单的所见即所得编辑器。我发现在vue.js上只创建了一个真正的所见即所得编辑器。这里是__https://quasar.dev/vue-components/editor (但我没有找到插入图像的功能)。其他的vue wysiwyg编辑器仅仅是tinymce或ckeditor等的包装器。 我计划创建简单的vue编辑器使用基本命令从示例从mozilla开发人员网站。这就是https://codepen.io/chrisdavidmills/pen/gzYjag。 首先，我想知道如何将vue组件插入到contenteditable div中。我的意思是？例如，我想创建编辑器插件
浏览 40提问于2020-01-22得票数 2
当我想创建"new Vue({...})时，我总是得到这个TypeError。我正在加载我的Google Chrome扩展中的vue.js脚本，并将其附加到<head> - Tag中。它已成功加载。不知道如何解决此错误
下面是我加载vue js的方法。
浏览 24提问于2020-03-09得票数 0
1回答
我有一个工作的Vue 2应用程序与服务器端渲染。现在我正在尝试升级到Vue 3，但仍然停留在SSR部分，因为vue-server-renderer包抛出了以下错误： Vue packages version mismatch: - vue@3.0.0 - vue-server-renderer@2.6.12 This may cause things to work incorrectly. Make sure to use the same version for both. 但是vue-server-renderer没有3.0.0版本... 通过谷歌搜索，我在vue-next存储库中发现
浏览 114提问于2020-10-07得票数 10
回答已采纳
如何通过我的应用程序使axios的 API请求可重用的，这样我就可以避免重复编写相同的代码。
//load the axios HTTP library
window.axios = require('axios');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
mounted(){
console.log('hello!');
}
});
我正在考虑尝试这样的方法( )，但我不知道如何将这些函数附加到V
浏览 0提问于2018-05-29得票数 0
1回答
如何模拟我的外部服务类
、、、
在我的vue组件中，在挂载中，我调用一个服务类，然后调用axios调用下面的..like
import StudentService from '../utils/student.services'
export default {
name: 'student-summary',
mounted () {
console.log('%c FeeMdoule-Data Recieved on Mount as %s', 'color: blue ;font-size : 12px', JSON.
浏览 1提问于2019-05-13得票数 0
回答已采纳
我将Vue.js用于我的前端项目之一。
如您所知，Vue附带了组件的特殊语法- each component can be declared in a single .vue file。这意味着，您可以在这样的单个文件中定义所有相关内容：
<tamplate>
...component template goes here...
</template>
<script>
...component code goes here...
</script>
<style>
...component style g
浏览 1提问于2016-02-11得票数 1
回答已采纳
我是VueJS的新手，我正在尝试创建一个自定义表单组件。
我使用的是元素。所以我创建了一个新的Form.vue文件
<template>
<el-form :model="data">
<slot></slot>
</el-form>
</template>
<script>
import { FormItem, Input } from 'element-ui';
export default {
name: 'gene
浏览 2提问于2018-02-03得票数 4
回答已采纳
2回答
我有一个类，它有很多依赖项。
@Service
public class TestClass {
@Inject
private DependencyA dependencyA;
@Inject
private DependencyB dependencyB;
@Inject
private DependencyC dependencyC;
// .
// .
// .
// .
@Inject
private DependencyZ dependencyZ;
pub
浏览 8提问于2021-05-12得票数 1
使用vue create .命令创建了一个vue项目。我正在使用以下配置生成我自己的index.html文件： new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
}), 现在在index.html中，我如何链接css文件？我试着这样做，但不起作用 <link rel="stylesheet" href="~@/assets/custom/styles.css"> 如
浏览 14提问于2020-06-29得票数 1
我在vue prototype中声明了$bus来访问全局，但是得到了这个错误
Property `prototype` does not exist on type vue.
可以帮助我如何使用typescript进行声明吗？Vue版本为3。
浏览 50提问于2021-05-31得票数 0
这就是我如何从vue main.js集成socket io客户机的方法。
import socketIoExt from 'vue-socket.io-extended'
import socketIo from 'socket.io-client'
Vue.use(socketIoExt, socketIo('http://192.168.1.1:8000'));
下面的代码是我请求API的示例函数之一。
getUserInfo(user_id){
console.log("before request")
thi
浏览 18提问于2022-02-21得票数 1
在创建Vuejs应用程序时，我们选择一个元素(Id等)将Vue应用程序挂载到： var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}) 我们的HTML代码可能如下所示(使用Vue的入门示例)： <div id="app">
{{ message }}
</div> 我在谷歌上搜索了一些后还没能回答的问题(由于搜索污染？)是指在初始Dom加载之后由第三方脚本插入到该作用域中的DOM对象是否可以在我们的作用域内访问，例如：
浏览 18提问于2019-06-22得票数 1
回答已采纳
我有一个组件AddEmployeeModal.vue，在这里我想测试vue/ UseMutation -composable中的UseMutation是否被调用。
// AddEmployeeModal.vue:
import { provideApolloClient, useMutation, useQuery } from '@vue/apollo-composable';
import { apolloClient } from '@/apollo/ApolloClient';
import {
CreateEmployeeDocument,
U
浏览 10提问于2022-06-22得票数 1
2回答
模拟路由器模块玩笑
、、、
In apiFile.js，
import router from './router';
myFn(){
const url = router.app.$appSettings.redirectUrl
}
./路由器文件，
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [{...}]
const router = new VueRouter({
mode: 'history',
浏览 4提问于2021-06-09得票数 0
1回答
访问Vue3全局组件
、、、
所以我正在尝试将这个Vue2项目转换为Vue3(typescript)。
它全局注册组件并访问它们以匹配我存储中的值，但是当尝试在Vue3中实现这一点时，组件仍然是未定义的。
import getComponentTypeForContent from "../api/getComponentTypeForContent";
import { mapState } from "vuex";
import { defineComponent } from "vue";
export default defineComponent({
name
浏览 4提问于2021-02-19得票数 3
我读了3遍vue-utils-test文档和jest文档，但我不知道如何准确地模拟vue组件中的vue混合并测试组件。
浏览 2提问于2017-11-16得票数 25
回答已采纳
我正在使用vue create CLI构建一个定制的Vue JS插件。我已经导入了我的各种包，但是，当尝试在VeeValidate中使用自定义设置时，会出现一个错误。
plugin.js
/*
* NOTE:
* This file is plugin stub for main.js
*/
// Import required packages
import Vue from 'vue'
import VeeValidate from 'vee-validate'
import VueResource from 'vue-resource&
浏览 0提问于2019-05-16得票数 2
1回答
我使用Vue 2，vue-test-utils，jest
插件是vue-croppa，用于上传图片。
import Croppa from 'vue-croppa'
Vue.use(Croppa, { componentName: 'image-croppa' })
它通过v型安装到我的组件上。然后我就可以调用一些方法了。
模板
<image-croppa v-model="myCroppa" ...>
脚本
data() {
return {
myCroppa: {},
}
},
此外，我还有一些方法调用vue-cr
浏览 2提问于2018-03-01得票数 5
回答已采纳
1回答
我很难用jest来模拟/测试这个加载脚本包：
import Footer from './Footer'
import { shallowMount } from '@vue/test-utils'
import { mocks } from '@test/components.spec-helper'
import load from 'load-script'
describe('Footer Component', () => {
const wrapper = shallowMount(Page
浏览 2提问于2019-06-10得票数 2
回答已采纳
我刚刚开始使用render函数，遇到了一个问题。在呈现时，Home组件不显示在
App.vue
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link> |
<router-link :to="{ name: 'hello' }">Hello
浏览 2提问于2020-07-06得票数 0
2回答
我想知道如何在Vue.js的单元测试中测试计算的属性。
我通过vue-cli (基于webpack)创建了一个新项目。
例如，下面是我的组件
<script>
export default {
data () {
return {
source: []
}
},
methods: {
removeDuplicates (arr) {
return [...new Set(arr)]
}
},
computed: {
types () {
浏览 5提问于2017-01-25得票数 7
1回答
我对非常陌生，也不知道如何为我编写的类编写有效的测试。该类如下(Java)：
public class MyServiceClassImpl implements MyService {
private someExternalClient client;
private anotherExternalClient anotherClient;
public MyServiceClassImpl() {
client = someExternalClient.getInstance();
anotherClient = anotherE
浏览 1提问于2014-11-19得票数 3
回答已采纳
1回答
情况
我正在尝试用Jest测试一个简单的Vue3组件。我想要评估是否呈现某个文本。该决策依赖于布尔计算值(isNeverShowAgain)，而则希望模拟该计算值。
<template>
<div :class="{ modal: true, 'is-active': showDialog }">
....
<WelcomeText />
....
</div>
</template>
<script lang="ts"
浏览 6提问于2021-11-12得票数 3
1回答
两部分问题
我的脚步：
创建空文件夹
开放cmd
导航到文件夹并运行npm init -f
运行vue init webpack
运行npm install
npm i bootstrap-vue
npm run dev
我的main.js：
import Vue from 'vue'
import App from './App'
import router from './router'
import BootstrapVue from 'bootstrap-vue'
import
浏览 0提问于2017-09-21得票数 1
回答已采纳
1回答
我是vue.js新手，我想在组件中使用框架制作一个简单的表单，这需要这个jQuery片段才能工作：
$(document).ready(function() {
M.updateTextFields();
});
构成部分是：
<template>
<div>
<div class="row">
<div class="input-field col s6">
<input value="" id="first_
浏览 0提问于2018-09-05得票数 1
我读过的关于Vue的资源都没有试图解释Vue应用程序是如何启动的。这里涉及三个文件: public/index.html、src/main.js和src/App.vue。使用vue cli 4.1.1创建的scaffold包含这个index.html，它显然是入口点： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" conte
浏览 63提问于2020-01-08得票数 5
回答已采纳
1回答
我正在尝试创建一个小应用程序，在其中我可以点击按钮并隐藏段落，但我试图使用vuex实现它，我在Home.vue文件中有一个段落，在我的About.vue文件中有一个按钮。我想在按钮的点击中有条件地隐藏段落，但是我想要使用vuex来完成这个任务。我该怎么做？我的store.js、home.vue和About.vue如下。
This is how my store looks like.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Stor
浏览 0提问于2019-01-22得票数 3
我用Jest做客户测试。但我有个问题。
当我将Class方法替换为模拟函数和恢复模拟函数时，我使用Jest mockRestore方法。但不起作用。
我如何解决这个问题？
console.log(OriginalClass.call);
// it will result is here.
// console.log test/vue/plugins/swaggerClient.spec.js:46
// [AsyncFunction: call]
OriginalClass.call = jest.fn().mockReturnValue(`test`);
Original
浏览 0提问于2019-08-08得票数 3
2回答
VueJS路由未定义
、、、
我试图在router-view标记中呈现vue组件。但它给了我一个错误
TypeError:路由未定义
但我在任何地方都没有使用route这个词。这是我的密码。
App.vue
<template>
<div id="app">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
浏览 0提问于2018-03-12得票数 6
回答已采纳
当试图使用自定义别名导入文件时，我会收到以下错误：
import api from 'api'
api in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/exercises.vue?vue&type=script&lang=js&
这是我的nuxt.config.js：
import { resolve } from 'path'
const _api = process.env.A
浏览 0提问于2022-05-15得票数 1
在这个中，父home组件有一个子addItem组件。父级的passes数组(作为支柱)可以将项添加到父列表，即从父->子节点传递数据的正常方式，即通过道具:fruitsArr="fruits"传递数据。
Main.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import Home from "./components/Home.vue";
import addItem fr
浏览 1提问于2019-05-15得票数 0
我有一个带有Laravel和Vue.js的PHP项目，我想分别处理Admin和Client。所以我需要添加一个Vue实例。但我不知道如何创建和配置它。请帮我解决这个问题。非常感谢。
浏览 6提问于2022-02-16得票数 0
回答已采纳
好的，这是情况，我正在用Vue.js做一个SPA。我在我的组件中使用VeeValidate，比如在Component1.vue中，
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
//...
}
在另一个组件中，比如在Component2.vue中，我使用的是vuetable-2，我是这样注册的，
import Vuetable from 'vuetable-2/src/component
浏览 2提问于2018-04-09得票数 1
概述的步骤包括
vue create my-app
vue add cordova
npm run cordova-prepare
npm run cordova-serve-browser
这工作还行
npm run cordova-serve-ios
许多站点建议改变这种情况。
new Vue({
el:'#app',
mounted:{
alert("Vue is running");
}
})
到这个
const app = new Vue({
el:'#app',
methods
浏览 3提问于2020-05-01得票数 0
回答已采纳
1回答
我有一个为EJB TimerService使用@Resource注解的SomeService。
@资源私有TimerService timerService；
我如何在SomeService中注入一个模拟TimerService来代替这个TimerService？
浏览 1提问于2016-09-08得票数 2
我正在为我的应用程序使用Vue 3和Vue-Router，在使用useRoute()的组件上使用Jest创建单元测试时遇到了问题，如下所示： <template>
<div :class="{ 'grey-background': !isHomeView }" />
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from
浏览 188提问于2020-12-09得票数 2
回答已采纳
1回答
因此，我已经看过雷蒙德·赫廷格的演示文稿超级考虑的超级以及使用超级继承和多继承利用依赖注入的能力
在他的一个示例中，他向我们展示了如何通过引入基类的模拟实现来模拟依赖关系，并在新的子类实现中使用这个模拟来提供可测试性：
class Robot(object):
def left(self):
print("walking left")
def right(self):
print("walking right")
class MyRobot(Robot):
def clean(self):
super().
浏览 4提问于2019-12-29得票数 0
我正在使用Vue.js 3.0编写一个Vue.js应用程序。我用它来学习组合API。我喜欢Vue.js 2.0的一个特性是双向数据绑定的易用性。但是，使用复合API，我不清楚如何使用它。尤其是当使用全局状态时。例如，我的应用程序有两个组件，如所示。代码如下所示：
<div id="my-vue" class="demo">
<banner :class="{ 'even-banner': isEven, 'odd-banner': !isEven }"></banner>
浏览 2提问于2020-09-09得票数 0
这真的把我逼疯了。我不是在变异道具。我知道这是什么，也知道你为什么要犯这个错误，而我不会这么做。有人能帮帮我吗?因为我不能排除这个错误。
这是我的组成部分：
<template>
<h2>
{{ title }}
</h2>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
@Component({})
export default class N
浏览 11提问于2022-05-02得票数 0
我正在尝试模拟vuejs方法中的axios调用。这个是可能的吗？ 下面是我的vue组件(SomeObj)： methods:{
callAxiosMethod() {
const callApi= axios.create();
callApi.defaults.timeout = 10000;
callApi.get(mockedUrl)
.then(response => {
console.log('response is ' + resp
浏览 9提问于2019-04-23得票数 1
为了对一个类进行单元测试，我想创建一个SimpleXMLElement对象的模拟。不幸的是，我想不出该怎么做。我通常会这样做：
class XmlTest extends PHPUnit_Framework_TestCase
{
public function testSimpleXmlMock()
{
$mock = $this
->getMockBuilder('SimpleXMLElement')
->disableOriginalConstructor()
浏览 1提问于2014-07-02得票数 2
2回答
我的UI组件与我的UI框架(即Vue + Vuetify)紧密耦合。该框架提供了一些测试实用程序，允许您在不需要浏览器的情况下伪造这些组件的呈现。然后，我使用测试框架(即Jest)获取快照，并断言组件的特定值和行为。但是，我并不是在模仿任何UI框架依赖项，如果这样做，我将无法呈现组件并对它们进行测试。这种测试是否被认为是UI组件的单元测试而不模拟UI框架？那它叫什么？我的单元测试方法正确吗？我是否应该嘲笑这个框架，以及如何呢？
谢谢。
浏览 0提问于2019-04-27得票数 0
回答已采纳
我有一个侧重于输入的指令。我要测试这个指令。唯一的问题是我找不到如何测试输入是否集中
这是我的简单模拟组件
<template>
<div v-directive>
<input/>
</div>
</template>
这是我的指示：
import Vue from 'vue'
export const focusInput = () => {
return {
inserted(el: any) {
el.getElementsByTagName('inpu
浏览 0提问于2018-10-29得票数 15
回答已采纳
Vue 3和TypeScript给出了一个错误(见下文)，但只有在脚本lang="ts“存在时才会出现错误。有人能解释为什么Vue 3中带有类型标记的inject不能工作吗？
ERROR in src/components/global/HeaderMenu.vue:85:7
TS2698: Spread types may only be created from object types.
83 | const auth = inject('Auth');
84 | return {
> 85 | ...auth
浏览 24提问于2021-12-08得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
