首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用jest/sinon等在javascript中模拟(改变值)全局变量?

在JavaScript中,可以使用jest和sinon等工具来模拟和改变全局变量的值。下面是一种使用jest和sinon的方法来模拟全局变量的示例:

  1. 首先,安装jest和sinon依赖:
代码语言:txt
复制
npm install jest sinon --save-dev
  1. 创建一个JavaScript文件,例如globalVariable.js,其中包含一个全局变量:
代码语言:txt
复制
// globalVariable.js
let globalVar = 'initial value';

function getGlobalVar() {
  return globalVar;
}

function setGlobalVar(value) {
  globalVar = value;
}

module.exports = {
  getGlobalVar,
  setGlobalVar
};
  1. 创建一个测试文件,例如globalVariable.test.js,在该文件中使用jest和sinon来模拟全局变量的值:
代码语言:txt
复制
// globalVariable.test.js
const sinon = require('sinon');
const globalVariable = require('./globalVariable');

test('should simulate and change global variable value', () => {
  // 模拟全局变量的值
  const mockValue = 'mocked value';
  const getGlobalVarStub = sinon.stub(globalVariable, 'getGlobalVar').returns(mockValue);

  // 调用被测试的函数
  const result = globalVariable.getGlobalVar();

  // 断言模拟的值是否被正确返回
  expect(result).toBe(mockValue);

  // 改变全局变量的值
  const newValue = 'new value';
  globalVariable.setGlobalVar(newValue);

  // 断言全局变量的值是否被成功改变
  expect(globalVariable.getGlobalVar()).toBe(newValue);

  // 恢复原始的全局变量值
  getGlobalVarStub.restore();
});
  1. 运行测试文件:
代码语言:txt
复制
npx jest globalVariable.test.js

这样,你就可以使用jest和sinon等工具在JavaScript中模拟和改变全局变量的值了。请注意,以上示例中的globalVariable.js文件和globalVariable.test.js文件仅作为示例,你可以根据实际情况进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

提高代码质量——使用JestSinon给已有的代码添加单元测试

JestSinon.js是什么 Jest是FaceBook推出的一个针对JavaScript进行单元测试的库,它提供了断言、函数模拟API来对你自己编写的业务逻辑代码进行测试后。...Sinon.js是一个用来做独立测试和模拟JavaScript库。它在单元测试的编写通常用来模拟HTTP相关请求。...; 我的项目中,主要是使用Sinon.js来模拟HTTP请求。...Sinon.js的文档,有专门关于XMLHttpRequest对象的模拟的章节,在下一章,我们将会针对项目中sinon.js的使用进行简单的介绍。...关于Jest如何测试JavaScript代码以及Sinon如何模拟XMLHttpRequest请求的,我们将会在后面几篇博客给大家带来相关的源码解析,有兴趣的同学可以关注我,留意后续的文章。

3.7K00

jest 单元测试改善老旧的 Backbone.js 项目

对于这样的既有项目,之前的文章也进行过分析,常常面临依赖不清、封装混乱,以及缺乏测试问题;对之进行维护和新需求开发时,结合其本身特点, TDD 的方式下进行渐进的改善,而非推倒重来,无疑是个可行的办法...本文将尝试用一个重构实例来抛砖引玉,讲解如何对其应用较新的 jest 测试框架,并用 ES6 class 新手段升级 Backbone.View 视图组件和改善页面结构,希望能对类似项目的改善起到开启思路的作用...其主要功能模块包括: Events:提供一系列事件的绑定和触发等功能 Model: 对数据或状态的转化、校验、计算派生、提供访问控制,也负责数据的远程同步,并有事件触发机制;作用类似于 MobX...url 前缀 可以发现 model 依赖了以个全局变量的属性 _appFacade.ajaxPrefix 首先编写一个假的全局对象: // __test__/fakeAppFacade.jsvar...Backbone 的请求,包括 Backbone.sync / model.fetch() , 本质上还是调用的 jQuery 的 $.ajax 方法(默认情况下),也就是传统的 xhr 方式,使用

3.4K10

对 React 组件进行单元测试

广义的讲,以上的 spy 和 stub ,以及一些对模块的模拟,对 ajax 返回模拟、对 timer 的模拟,都叫做 mock 。...React 单元测试中用到的工具 Jest 不同于"传统的"(其实也没出现几年)的 jasmine / Mocha / Chai 前端测试框架 -- Jest使用更简单,并且提供了更高的集成度、更丰富的功能...此外, Jest 的测试用例是并行执行的,而且只执行发生改变的文件所对应的测试,提升了测试速度。...虽然 Jest 本身也有一些实现 spy 的手段,但 sinon 使用起来更加方便。 III....sinon 中有一些模拟 XMLHttpRequest 请求的方法, jest 也有一些第三方的库解决 fetch 的测试; 我们的项目中,根据实际的用法,自己实现一个类来模拟请求的响应: //FakeFetch.jsimport

4.2K40

实例入门 Vue.js 单元测试

,用一个虚拟的对象来创建以便测试的测试方法 广义的讲,以上的 spy 和 stub ,以及一些对模块的模拟,对 ajax 返回模拟、对 timer 的模拟,都叫做 mock 。...Vue.js 的单元测试工具 2.1 Jest 不同于"传统的"(其实也没出现几年)的 jasmine / Mocha / Chai 前端测试框架;Jest使用更简单(也许就是这个单词的本意“俏皮话...此外, Jest 的测试用例是并行执行的,而且只执行发生改变的文件所对应的测试,提升了测试速度。...实际使用,适当的 package.json 的 jest 字段或独立的 jest.config.js 里自定义配置一下,会得到更适合我们的测试场景。...虽然 Jest 本身也有一些实现 spy 的手段,但 sinon 使用起来更加方便。

2.8K20

分享7个专业级的JavaScript测试库,提高你的工作效率

在这篇文章,我将向大家介绍七个优秀的JavaScript测试库,包括JestSinon、Detox、Cucumber、Stryker、TestDouble和Mockttp。...这些库各自的领域中都有出色的表现,如单元测试、功能测试、模拟、集成测试和突变测试。通过本文的介绍,我希望你能更深入地了解这些库,找到适合你项目的测试工具。...2、Sinon 这是一个独立的库,用于JavaScript测试创建测试替身(侦查、桩和模拟)。它通过提供工具来验证函数调用、控制行为,帮助你编写隔离的测试。...在这个文件,你可以定义Stryker应该如何运行你的测试和创建变异。...结尾 在这篇文章,我们了解了七个JavaScript测试库:JestSinon、Detox、Cucumber、Stryker、TestDouble和Mockttp。

21520

如何模拟一个XMLHttpRequest请求用于单元测试——nise源码阅读与分析

概述 我们进行单元测试的过程,如果我们需要对一些HTTP接口进行相关的业务测试,那么我们就需要来模拟HTTP请求的发送与响应,否则我们就无法完成测试的闭环。...目前,有许许多多的测试框架都提供了模拟HTTP请求相关的一些流程功能,我们在这边文章中将会讲到的,就是我们在上一篇关于单元测试的博客提高代码质量——使用JestSinon给已有的代码添加单元测试中提到的...Sinon引用的HTTP模拟框架nise。...它是Sinon.js的一部分,用来处理HTTP相关测试问题。 该库提供了替换原生的XHR对象和Server相关的接口,但是我们本文中只介绍关于XHR部分,也就是浏览器的XHR对象的替换。...而我们进行HTTP相关测试时,参数是由我们传入的,因此不需要进行验证。所以我们最终需要验证的其实是callback的处理逻辑和结果。因此,我们可以通过以下一个示例来看下它如何与业务代码进行结合。

2.4K10

【干货分享】微信小程序单元测试攻略

2,被测代码包含复杂的环境因素需要处理或模拟,例如使用了storage、调用了接口、使用了环境变量。 (图片来源:码农翻身公众号) 但无论如何,有价值的东西就应该去做,不应该知难而退嘛。...$ npm i --save-dev jest 2.2.2 package.json,添加测试相关命令 {sd ......该方法和sinon.spy一样,生成函数的“间谍”,可以断言该函数的已调用次数、调用入参、调用返回是否符合预期。...其实是mock的时候,就将这个方法放在cache,当其他地方要import方法时,会先查看cache中有没有该方法,如果我们有mock了,他就使用mock的方法了。...如果cache没有该方法,再使用正常的方式import。

2.6K40

Vue 应用单元测试的策略与实践 01 - 前言和目标

Vue 应用的单元测试,对 UI 组件和 vuex store 测试的区别有何不同?颗粒度该细到什么程度?...阅读和练习本文的Jest的部分 // Then 他能够把Given/When/Then的套路学会 他能够学会Jest的基本用法,包括测试suite和断言语法 他能够学会Jest测试异步的几种方式 2... Vue 应用的单元测试,对 UI 组件和 vuex store 测试的区别有何不同?颗粒度该细到什么程度? // Given 一个有基本的UT知识但没写过Vue测试的新人?...下面让我们来谈谈如何写好 JavaScript 代码和 Vue 应用框架的单元测试。 如何选择一个测试框架? 众所周知,JavaScript 世界里最不缺的就是轮子,测试框架也是如此。...引自技术雷达:Jest是一个“零配置”的前端测试工具,具有诸如模拟和代码覆盖之类的开箱即用特性,主要用于React和其他JavaScript框架。 我们团队对采用JEST做前端测试的结果非常满意。

86240

JavaScript单元测试利器Jest+mocha+chai

浏览器进行测试 可在命令行以库的形式使用 二:JavaScript基础知识(PS:不入虎穴焉得虎子,先自己搞定JS基础知识 再谈其他的)2.1 JavaScript的变量JS变量的命名规则:1....由字母、数字、下划线组成,区分大小写2.必须以字母开头3.变量名不能有空格,且大小写敏感4.不能使用 JavaScript 的关键字做变量名变量声明: JavaScript ,用 Var 命令做声明变量...全局变量页面关闭后销毁,即:除非被显式销毁,否则一直存在。...String:单引号和双引号不能交叉使用使用.length属性访问字符串长度;字符串一旦被创建,其不能改变,若想改变必须销毁原有字符串。...2.6JavaScript的数组数组对象是使用单独的变量名来存储一系列的

43420

如何自动化测试 React Native 项目 (下篇) - 单元测试

接着上篇的内容, 这篇文章会详细的介绍 Glow 我们如何写单元测试, 以及 React Native 各个模块单元测试的详细实现方式。...单元测试工具 - Jest & Enzyme Jest - Facebook Jest 是 Facebook 开源的 Javascript 测试框架,提供了许多好用的 API,先介绍下主要的优点: 自带...Jest Snapshot Test的特点: Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...因此我们测试组件的时候, 也只要把重点放在测试我们如何描述这个组件。...交互测试,我们主要利用 simulate() API模拟事件,来判断这个元素的 prop 上的特定函数是否被调用, 传参是否正确, 以及组件状态是否发生意料之中的修改。

3.2K21

前端自动化测试框架 Jest 极简教程

JavaScript单元测试框架。...集成了 Mocha,chai,jsdom,sinon等功能。 具有零配置、内置代码覆盖率、强大的Mocks特点。 Jest源于测试Web聊天应用。...此外,如果你寻找隔离工具例如Mock库,大部分其它工具将让你在测试(甚至经常在你的主代码)写一些不尽如人意的样板代码,以使其生效。 Jest与Jasmine框架的区别是在后者之上增加了一些层。...最值得注意的是,运行测试时,Jest会自动模拟依赖。Jest自动为每个依赖的模块生成Mock,并默认提供这些Mock,这样就可以很容易地隔离模块的依赖。...这样,进行一些和数据相关的测试时,可以测试前准备一些数据,测试后,清理测试数据。

1.7K20

2021 年 Node.js 开发人员学习路线图

例如,对于表示范围在 0 到 255 之间字节的内存整数,使用 console.log() 输出该 Buffer 实例,会给出一系列十六进制。...开发技能 版本管理系统:掌握 git、GitHub 使用。开发,应尽量避免交叉修改代码导致的更改不可逆。因此,大型项目中需使用版本控制系统管理。...模板引擎 模板引擎支持应用开发中使用静态模板文件,并在运行时替换模板文件的变量为实际,生成发送给客户的 HTML 文件。下面列出了一些广为使用的模板引擎。...REST 架构使用基本 HTTP 调用进行通信,避免了使用 COBRA、COM +,RPC 复杂方式通信。 REST ,调用是基于消息的,依赖 HTTP 标准描述消息。...推荐阅读:下面资料分别介绍了如何使用 Sinon 和 Jasmine 实现 Mocking 测试: Sinon https://stackabuse.com/using-mocks-for-testing-in-javascript-with-sinon-js

2.3K20

2021年React学习路线图

图片 React Bootstrap 主页被分割成多个组件 每个组件有一套生命周期,动态数据保存在状态。当状态的数据发生改变时,组件会再次渲染,来更新这些变更。你要理解这几个基础概念。...它用在函数组件,允许开发者不使用类的情况下,使用状态和其他特性。 之前,函数组件是无状态的,状态和生命周期用在类组件。有了 Hooks,开发者可以函数组件中使用状态。...它比 Redux 容易多,也可以使用 Hooks(现在你应该熟悉它了)。 它使获取数据变得简单,可以实际应用做一些尝试。...学习 React 它是可选的,但仍然是一个好用的库。 3.2 测试 Jest - 简单的 JavaScript 测试框架。 Jest 是一个简单的 JavaScript 测试框架,它注重简单性。...您应该学习最流行的测试库,如 Jest 和 Enzyme,以及如何使用库(如 Sinon模拟 API 调用。还有其他库,比如 React 测试库。

7.5K21

2021年Node.js开发人员学习路线图

目标导向有助于在学习聚焦关键技能,而非纠结于是否值得去学习。 必备技能 JavaScript 对于一名前端开发人员,考虑掌握后端技能时,无需花费大量的精力学习去 JavaScript。...例如,对于表示范围在 0 到 255 之间字节的内存整数,使用 console.log() 输出该 Buffer 实例,会给出一系列十六进制。...开发技能 版本管理系统:掌握 git、GitHub 使用。开发,应尽量避免交叉修改代码导致的更改不可逆。因此,大型项目中需使用版本控制系统管理。...模板引擎 模板引擎支持应用开发中使用静态模板文件,并在运行时替换模板文件的变量为实际,生成发送给客户的 HTML 文件。下面列出了一些广为使用的模板引擎。...推荐阅读: 下面资料分别介绍了如何使用 Sinon 和 Jasmine 实现 Mocking 测试: Sinon https://stackabuse.com/using-mocks-for-testing-in-javascript-with-sinon-js

2.6K20

React + Redux Testing Library 单元测试

同一个文件夹创建一个 math.test.js 文件,在这里我们将使用 Jest 来测试 math.js 定义的函数: image.png 然后运行 yarn test (添加 NPM Script...从技术上讲,你可以真实的浏览器运行,但由于不同平台上启动真实浏览器的复杂性,更建议使用 JSDOM 虚拟浏览器环境运行 Node 的测试。...推荐使用 mount 的方法是依赖于一个名为 jsdom的库,它本质上是一个完全 JavaScript 实现的 headless 浏览器。...使用纯函数来执行修改 为了描述 action 如何改变 state tree ,你需要编写 reducers。这也就是 CQRS command(命令)的一种实现。...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store,而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。

2.3K10

【Web技术】639- Web前端单元测试到底要怎么写?

单元测试部分介绍 先讲一下用到了哪些测试框架和工具,主要内容包括: jest ,测试框架 enzyme ,专测 react ui 层 sinon ,具有独立的 fakes、spies、stubs、mocks...功能库 nock ,模拟 HTTP Server 如果有童鞋对上面这些使用和配置不熟的话,直接看官方文档吧,比任何教程都写的好。...selectors selector 的作用是获取对应业务的状态,这里使用了 reselect 来做缓存,防止 state 未改变的情况下重新计算,先看一下表格的 selector 代码: import...接着就是测试自己封装的 fetch 工具库了,这里 fetch 我是用的 isomorphic-fetch ,所以选择了 nock 来模拟 Server 进行测试,主要是测试正常访问返回结果和模拟服务器异常...写代码时,我用余光瞟见它。它一直提醒我,我做了写出整洁代码的承诺。

3K30

使用Enzyme测试React(Native)组件|洞见

而Enzyme则来自于活跃JavaScript开源社区的Airbnb公司,是对官方测试工具库(react-addons-test-utils)的封装,它模拟了jQuery的API,非常直观并且易于使用和学习...完全的DOM渲染需要在全局范围内提供完整的DOM API,这也就意味着它必须在至少“看起来像”浏览器环境的环境运行,如果不想在浏览器运行测试,推荐使用mount的方法是依赖于一个名为jsdom的库,...它本质上是一个完全JavaScript实现的headless浏览器。...如何测试 React Native?...前面我们所谈论的都是如何测试使用react-dom所构建的React组件,即最终渲染的结果是浏览器当中的DOM结构,但对于React Native来说,JavaScript代码最终会被编译并用于调用iOS

2.3K40

也来扯扯 Vue 单元测试

但最近,我又放弃了这种组合,转而使用 Jest。在这连番的折腾,入过不少坑(当然,很多时候是自己挖坑自己跳),也解锁了不少新姿势。...本文主要扯一扯自己完成这些单元测试,以及迁移到 Jest 过程的一些收获。文中并不会涉及非常具体的测试写法,因为这些教程官方文档已经做得很好了。...这会导致一些问题,例如,如果组件代码中有一些根据实际渲染后的属性进行计算(比如元素的 clientWidth)就可能出问题,因为 jsdom 这些参数通常默认是 0....所以有些情况下,测试可能要施以一些骚操作,比如自行 mock(实例上就是伪造,但合理地伪造)一些中间,来满足测试用例。...代码中直接 import 实际的 css 文件,则有可能报错,这时则需要使用 mock 来模拟 css 文件。

1.8K30

怎样编写更好的 JavaScript 代码

我之所以说 const 是 “永固的” 是因为它与 C/C++ 的 const 的工作方式不同。const 对 JavaScript 运行时的意义在于对 const 变量的引用永远不会改变。...这并不意味着存储该引用的内容永远不会改变。对于原始类型(数字,布尔等),const 确实转化为不变性(因为它是单个内存地址)。... JavaScript ,只有绝对必要时才应使用传统的 for 循环。...Prettier 不会对使用 var 提出异议,但会自动对齐代码的所有括号。我的开发过程将代码推送到 Git 之前,总是处理得很漂亮。...替代品:Jest,Mocha,Jasmine Spies 和 Stubs — Sinon Sinon on Github(https://github.com/sinonjs/sinon) Spies

1.3K30
领券