正文 

当前位置： 首页 > 知识 >

如何在 JEST 测试中模拟全局 Vue.js 变量

     2023-02-22     172

关键词：

【中文标题】如何在 JEST 测试中模拟全局 Vue.js 变量【英文标题】：How to mock global Vue.js variable in JEST test 【发布时间】：2018-12-15 07:30:26 【问题描述】：

我的应用网址有一个全局属性/变量：

Vue.prototype.$apiUrls = 
  root: 'http://localhost:8080/',
  api: 'api/v1/'
  // etc.

我在我的组件中使用它作为 axios 请求：

axios.get(`$this.$apiUrls.root$this.$apiUrls.api/users/`)

现在我想测试我的组件的代码，我已经模拟了axios，但我仍然收到错误：

TypeError: Cannot read property '$apiUrls' of undefined

我尝试在每个测试和/或 JEST 的设置文件中定义/模拟此属性，例如

global.$apiUrls = ...
// or
Vue.prototype.$apiUrls = ...
// or
Object.defineProperties(Vue.prototype, $apiUrls: ...)

我也尝试将其模拟为 window 或 this（是的，这很愚蠢），但没有成功 - 我仍然收到该错误 - 请帮助。

【问题讨论】：

你也在用vue-test-utils吗？ @Derek 不在此特定项目中，但如有必要，我也愿意在这里开始使用它；） 我担心的是文档的一部分是这样说的：Note some plugins, like Vue Router, add read-only properties to the global Vue constructor. This makes it impossible to reinstall the plugin on a localVue constructor, or add mocks for these read-only properties hmn 但我认为如果我想模拟 $router 道具，或者如果我使用类似 Vue.use(myPluginWithApiUrlProperty) 的东西（但不确定） 你解决了吗？如果您需要任何澄清，请告诉我！ 【参考方案1】：

我认为上述答案不再有效（2020 年）。

这对我有用：

适用于 vue-test-utils 1.x.x (Vue 2)

    创建一个新文件，命名为例如。 jest.init.js 给它以下内容： 
import  config  from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock
    将此添加到您的jest.config.js（实际上写“rootDir”，不要用真实路径替换任何内容） 
module.exports = 
  setupFiles: ["<rootDir>/jest.init.js"]

这些文件只会在 jest 运行单元测试之前运行。

请注意，我正在导入 config，而不是默认导出。我不知道为什么默认设置对我不起作用。 Even the documentation for vue test utils doesn't import the default export anymore

还要确保您没有尝试从旧的 vue-test-utils 包中导入。 （新的是@vue/test-utils）

对于@vue/test-utils 2.x.x (vue-test-utils-next) (Vue 3)

按照上述 1.x.x 的步骤进行操作，但在第二步中，改为执行此操作：

import  config  from "@vue/test-utils"; //2.0.0-beta.5
config.global.mocks = 
  yourGlobalProperty: label => label
;

【讨论】：

【参考方案2】：

有两种方法可以实现这一点。一种是使用@Aldarund 提到的Config 选项。你可以阅读它here。

如果您使用 Jest，我建议在 jest.init.js 文件中执行此操作：

import  config  from '@vue/test-utils'

config.mocks['$apiUrls'] = 
  'some/endpoint'

然后将其添加到您的package.json 的jest 部分：

"setupFiles": [
  "<rootDir>/jest.init.js"
]

现在它被全局模拟了。如果您想在每个测试的基础上执行此操作，您可以使用 mocks 安装选项：

const wrapper = shallowMount(Foo, 
  mocks: 
    $apiUrls: 'some/endpoint'
  
)

希望这会有所帮助！

如果您有兴趣，我正在编写一组关于如何测试 Vue 组件的简单指南here。它正在开发中，但如果您需要其他相关方面的帮助来测试 Vue 组件，请随时提出问题。

【讨论】：

这不再有效。你需要做import config from "@vue/test-utils"。见vue-test-utils.vuejs.org/api/#config @xenetics 你应该已经承认了 Artur 的评论或回答，因为你刚刚根据他的更新。【参考方案3】：

您可以使用 vue-test-utils beta 15 及更高版本进行操作。

这里docs

还有一些例子：

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.mocks['$apiUrls'] = 
  ...

【讨论】：

在 Jest 中模拟全局变量

...实用方法。例如：//Utils.jsexportisOnline()returnnavigator.onLine;测试这个微小的函数很简单，但很麻烦，而且根本没有确 查看详情

如何在 vue.js 单元测试中模拟 window.google

】如何在vue.js单元测试中模拟window.google【英文标题】：Howtomockwindow.googleinavue.jsunittest【发布时间】：2019-09-2122:10:14【问题描述】：我正在尝试测试一个显示谷歌地图的vue组件google包含脚本元素位于父组件中的某个位置，而我尝... 查看详情

使用 Jest 在 Nuxt 中测试组件时如何添加/模拟 Nuxt Auth 库

】使用Jest在Nuxt中测试组件时如何添加/模拟NuxtAuth库【英文标题】：Howtoadd/mocktheNuxtAuthlibrarywhentestingcomponentsinNuxtwithJest【发布时间】：2020-04-2319:04:56【问题描述】：这里是JS新手。我已经生成了一个Nuxt应用程序，并在我的nuxt.confi... 查看详情

如何使用 jest 测试 Vue.js 组件中方法的错误

】如何使用jest测试Vue.js组件中方法的错误【英文标题】：HowtotestanErrorofaMethodinaVue.jsComponentusingjest【发布时间】：2020-04-0108:58:48【问题描述】：如何测试我的Vue组件的方法createUser()？我想测试createUser()方法是否会抛出Error如果first... 查看详情

Jest - 测试在反应变量中声明的 Vue.js 函数

】Jest-测试在反应变量中声明的Vue.js函数【英文标题】：Jest-testVue.jsfunctionsdeclaredinsidereactivevariables【发布时间】：2021-07-2821:42:20【问题描述】：您知道在VUE中测试在反应性变量中声明的函数的正确方法是什么。为了在组件中实现... 查看详情

如何在 Jest 测试中模拟 StatusBarManager.getHeight？

】如何在Jest测试中模拟StatusBarManager.getHeight？【英文标题】：HowtomockStatusBarManager.getHeightinJesttest?【发布时间】：2020-01-0509:12:56【问题描述】：我正在使用来自wix的expo34和react-native-ui-lib并且在为我的组件设置笑话测试时遇到问题... 查看详情

如何在 React Jest 测试中“模拟”navigator.geolocation

】如何在ReactJest测试中“模拟”navigator.geolocation【英文标题】：Howto"mock"navigator.geolocationinaReactJestTest【发布时间】：2017-08-1722:45:25【问题描述】：我正在尝试为我构建的一个反应组件编写测试，该组件在这样的方法中使... 查看详情

用 Jest 和 Typescript 模拟一个全局对象

...的Routes全局对象——Rails的宝石。我有一个使用Jest的快照测试，它测试我碰巧使用Routes全局的简单组件。在我的测试中，我想模拟Routes。所以当我的组件调 查看详情

如何模拟在使用 Jest 测试的 React 组件中进行的 API 调用

】如何模拟在使用Jest测试的React组件中进行的API调用【英文标题】：HowtomockAPIcallsmadewithinaReactcomponentbeingtestedwithJest【发布时间】：2019-09-0314:14:20【问题描述】：我正在尝试模拟一个将数据检索到组件中的fetch()。I\'musingthisasamodelf... 查看详情

如何测试我的数据是不是更改？ （Vue JS、Jest、单元测试）

】如何测试我的数据是不是更改？（VueJS、Jest、单元测试）【英文标题】：HowdoItestifmydatachanges?(VueJS,Jest,UnitTesting)如何测试我的数据是否更改？（VueJS、Jest、单元测试）【发布时间】：2020-04-2508:54:26【问题描述】：我正在我的前... 查看详情

JEST 不会触发模拟函数 Vue js

...时间】：2019-12-1001:59:54【问题描述】：我有一个带有单元测试的简单组件，如下所示。我试图在锚点上触发点击事件，但我认为它不会因为错误而发生：预期的模拟函数已被调用，但未调用。组件：<template><a@click="fetchAll"c... 查看详情

如何在 Jest 中模拟一个函数

】如何在Jest中模拟一个函数【英文标题】：HowtomockafunctioninJest【发布时间】：2019-04-0923:33:58【问题描述】：我有以下要在Jest中测试的打字稿类。//MyClass.tsimportfoofrom\'./somewhere/FooFactory\';exportclassMyClassprivate_state:number;constructor(arg:st... 查看详情

如何在带有 Jest 的 react-native 中使用模拟的 fetch() 对 API 调用进行单元测试

】如何在带有Jest的react-native中使用模拟的fetch()对API调用进行单元测试【英文标题】：HowtounittestAPIcallswithmockedfetch()inreact-nativewithJest【发布时间】：2016-07-0408:13:56【问题描述】：在ReactNative中，我使用fetch来执行网络请求，但是fet... 查看详情

如何在 Jest 中模拟 .then() 和 .catch()？ [关闭]

】如何在Jest中模拟.then()和.catch()？[关闭]【英文标题】：Howtomock.then()and.catch()inJest?[closed]【发布时间】：2021-11-0811:35:04【问题描述】：谁能给我一个示例，说明如何在Jest中模拟.then()块和.catch()块我正在尝试测试AWScognito.signUp().the... 查看详情

无法在基于 jest 和 vue-test-utils 的测试项目中使用 vue.js 的 ES6 模块

】无法在基于jest和vue-test-utils的测试项目中使用vue.js的ES6模块【英文标题】：CannotuseES6moduleofvue.jsintestprojectbasedonjestandvue-test-utils【发布时间】：2020-08-0622:49:33【问题描述】：下午好。我需要测试基于.vue组件的vue.js接口。带有UI... 查看详情

在 Jest 中的每个测试之前运行全局测试设置

】在Jest中的每个测试之前运行全局测试设置【英文标题】：RunningaglobaltestsetupbeforeeachtestinJest【发布时间】：2018-07-2105:35:51【问题描述】：我正在尝试在我的Jest测试套件中的每个测试之前执行测试设置功能。我知道我可以使用bef... 查看详情

如何在每次测试之前重置 Jest 模拟函数调用计数

】如何在每次测试之前重置Jest模拟函数调用计数【英文标题】：HowtoresetJestmockfunctionscallscountbeforeeverytest【发布时间】：2018-05-2812:14:53【问题描述】：我是Jest的新手，我试图用它来测试一个函数是否被调用。我注意到mock.calls.leng... 查看详情

需要在 Vue.js 应用程序中使用 Jest 测试 axios Web 服务承诺返回结果，但出现错误

】需要在Vue.js应用程序中使用Jest测试axiosWeb服务承诺返回结果，但出现错误【英文标题】：NeedtotestaxioswebservicepromisesreturnresultusingJestinVue.jsapp,butgettingerror【发布时间】：2019-05-2622:35:48【问题描述】：我正在使用Vue.js和axios开发新... 查看详情