在单元测试中使用Jest模拟VS Code extension API

这篇具有很好参考价值的文章主要介绍了在单元测试中使用Jest模拟VS Code extension API。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  对VS Code extension进行单元测试时通常会遇到一个问题,代码中所使用的VS Code编辑器的功能都依赖于vscode库,但是我们在单元测试中并没有添加对vscode库的依赖,所以导致运行单元测试时出错。由于vscode库是作为第三方依赖被引入到我们的VS Code extension中的,所以它并不受我们的控制,最好的办法就是在单元测试中对其中的API进行模拟。本文中我将介绍如何使用Jest来模拟vscode库的API。

  如果你还不太熟悉如何开始创建一个VS Code extension,这里的文档可以教你快速上手。

  创建好VS Code extension项目后,你会发现在根目录下有一个package.json文件,VS Code extension会从中读取配置项来管理UI界面元素,在实际开发中你可能会使用到其中的一些属性。我们可以通过package.json来设置项目所需要的依赖项,这里我们将Jest添加为dev dependency,并添加npm脚本以运行Jest单元测试。

npm i -D jest
{
  "scripts": {
    "test": "jest"
  }
}

模拟VS Code node module

  Jest提供了一些mocking的选项,但是因为我们想要模拟整个vscode node module,所以最简单的办法是在与node_modules文件夹相同的位置(通常是项目的根目录)创建一个__mocks__文件夹,并在其中添加一个与要模拟的模块名称相同的文件(vscode.js)。

  你不需要在测试代码中导入该模块,mock会自动加载它。Jest称此为manual mocks。

  这种方法最大的好处是它能将我们的测试代码与所依赖的模块分离,使测试代码看起来更加整洁。这里有一个小问题,新加入的开发者需要知道__mocks__文件夹,否则很难理解单元测试是如何正常工作的,因为单元测试中并没有VS Code模块被模拟的代码。

  以下就是对VS Code模块进行模拟的代码。我们并没有模拟整个API,你可以根据需要进行调整。

// vscode.js

const languages = {
  createDiagnosticCollection: jest.fn()
};

const StatusBarAlignment = {};

const window = {
  createStatusBarItem: jest.fn(() => ({
    show: jest.fn()
  })),
  showErrorMessage: jest.fn(),
  showWarningMessage: jest.fn(),
  createTextEditorDecorationType: jest.fn()
};

const workspace = {
  getConfiguration: jest.fn(),
  workspaceFolders: [],
  onDidSaveTextDocument: jest.fn()
};

const OverviewRulerLane = {
  Left: null
};

const Uri = {
  file: f => f,
  parse: jest.fn()
};
const Range = jest.fn();
const Diagnostic = jest.fn();
const DiagnosticSeverity = { Error: 0, Warning: 1, Information: 2, Hint: 3 };

const debug = {
  onDidTerminateDebugSession: jest.fn(),
  startDebugging: jest.fn()
};

const commands = {
  executeCommand: jest.fn()
};

const vscode = {
  languages,
  StatusBarAlignment,
  window,
  workspace,
  OverviewRulerLane,
  Uri,
  Range,
  Diagnostic,
  DiagnosticSeverity,
  debug,
  commands
};

module.exports = vscode;

使用模拟的VS Code模块的示例

  我的开源项目Git Mob for VS code中使用了这种方法,我将用其中的代码来说明如何使用模拟的VS Code模块。

  下面的例子中,VS Code编辑器的状态栏会根据Git钩子prepare-commit-msg是否被调用来做相应的调整,你可以看到这里我并没有将vscode模块导入到我的测试文件中并对其进行模拟。

// git-mob-hook-status.spec.js

const { hasPrepareCommitMsgTemplate } = require("../prepare-commit-msg-file");
const { gitMobHookStatus } = require("./git-mob-hook-status");

jest.mock("./../prepare-commit-msg-file");

describe("Hook or template status", function() {
  let mockContext;
  beforeAll(function() {
    mockContext = {
      subscriptions: []
    };
  });

  afterEach(function() {
    hasPrepareCommitMsgTemplate.mockReset();
  });

  it("using git template for co-authors", () => {
    hasPrepareCommitMsgTemplate.mockReturnValue(false);
    const statusBar = gitMobHookStatus({ context: mockContext })();
    expect(statusBar).toEqual(
      expect.objectContaining({
        text: "$(file-code) Git Mob",
        tooltip: "Using .gitmessage template"
      })
    );
  });

  it("using git prepare commit msg for co-authors", () => {
    hasPrepareCommitMsgTemplate.mockReturnValue(true);
    const statusBar = gitMobHookStatus({ context: mockContext })();
    expect(statusBar).toEqual(
      expect.objectContaining({
        text: "$(zap) Git Mob",
        tooltip: "Using prepare-commit-msg hook"
      })
    );
  });
});
// git-mob-hook-status.js
const vscode = require("vscode");
const { hasPrepareCommitMsgTemplate } = require("../prepare-commit-msg-file");

function gitMobHookStatus({ context }) {
  const myStatusBarItem = vscode.window.createStatusBarItem(
    vscode.StatusBarAlignment.Left,
    10
  );
  context.subscriptions.push(myStatusBarItem);
  return function() {
    myStatusBarItem.text = "$(file-code) Git Mob";
    myStatusBarItem.tooltip = "Using .gitmessage template";
    if (hasPrepareCommitMsgTemplate()) {
      myStatusBarItem.text = "$(zap) Git Mob";
      myStatusBarItem.tooltip = "Using prepare-commit-msg hook";
    }
    myStatusBarItem.show();
    return myStatusBarItem;
  };
}

exports.gitMobHookStatus = gitMobHookStatus;

  你可以在这里查看源代码:

  • git-mob-hook-status.spec.js
  • git-mob-hook-status.js

我能检查vscode模块中的方法是否被调用了吗?

  你可以导入模拟的vscode模块。下面的代码中,我想要检查当用户修改co-author文件时onDidSaveTextDocument事件是否被订阅了。

const vscode = require("../__mocks__/vscode");

// ...
test("Reload co-author list when git-coauthors file saved", () => {
  reloadOnSave(coAuthorProviderStub);
  expect(vscode.workspace.onDidSaveTextDocument).toHaveBeenCalledWith(
    expect.any(Function)
  );
  // ...
});
// ...

  可以看到这里都是Jest mock API的标准用法,这意味着我们可以在代码中正常使用vscode模块的方法,而不受manual mock的任何限制。例如,我们还可以使用mockImplementation来修改实现。

  更多示例可以查看这里的源代码:

  • reload-on-save.spec.js

  编写单元测试最大的好处是可以快速得到反馈结果,如果你对TDD(Test-Driven Development,测试驱动开发)情有独钟,那么单元测试将使你对VS Code extension的开发更加信心满满。

原文地址:Unit test & mock VS Code extension API with Jest文章来源地址https://www.toymoban.com/news/detail-634740.html

到了这里,关于在单元测试中使用Jest模拟VS Code extension API的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Junit单元测试 org.junit.jupiter.api.extension.ParameterResolutionException异常处理

    想根据Id查询信息,在Junit单元测中报错 @Test 单元测试方法中不允许添加参数 将 (Integer id) 删除即可,但这样必须手动添加调用方法中的id,并且只能测试查询单条数据,比如我要查询id=1的数据,就只能手动在括号里添加1 如果我要查询多条数据,自定义参数的话,可以使用参

    2023年04月22日
    浏览(35)
  • 单元测试(jest):理解、安装、使用

    一、理解单元测试的重要性 bug发现在开发阶段,成本很低, 如果发现在生产环境,成本很高, 如果是关键时刻,决定人生命运,决定企业发展。 从技术的角度讲,有效的提高代码的健壮性,有效的增加代码的可维护性,对于后期的代码重构是必要条件。 从团队的角度讲,

    2024年02月03日
    浏览(41)
  • 快速上手 Jest 单元测试框架:使用 Jest Preset 加速配置,灵活应对项目需求

    Jest preset 参数的作用是提供一个预先定义好的配置集合,以便于快速开始使用 Jest 单元测试框架。你可以选择现有的 preset,如 jest-preset-angular 、 create-react-app 或自定义 preset,以根据你的项目需求自动应用一系列配置。 使用示例: 先安装一个现有的 preset,例如 jest-preset-angul

    2024年02月06日
    浏览(35)
  • vue jest单元测试

    vue-test-utils 提供了两种方式用于渲染,或者说 加载(mount) 一个组件 — mount 和 shallowMount 。一个组件无论使用这两种方法的哪个都会返回一个 wrapper ,也就是一个包含了 Vue 组件 的对象,辅以一些对测试有用的方法。 mount : 会渲染子组件 shallowMount :会加载子组件,不会被

    2024年02月05日
    浏览(38)
  • Jest单元测试(一)

    Jest是Facebook一套开源的 JavaScript 测试框架,它自动集成了断言、JSDom、覆盖率报告等测试工具。 他适用但不局限于使用以下技术的项目:Babel, TypeScript, Node, React, Angular, Vue 官网地址:https://jestjs.io/en/ 使用 yarn 安装 Jest︰ 或 npm: 注:Jest的文档统一使用yarn命令,不过使用npm也

    2024年02月16日
    浏览(42)
  • vue 引入jest 单元测试

    为什么要搞单元测试,好处有什么。 提测需要, 代码覆盖率达到95%,分支覆盖率达到100% ,不达到要求,不给测。 确保代码正确性。单元测试可以检测和发现代码中的错误,在开发期间及时纠正。 提高代码质量。进行单元测试可以思考更多场景,添加边界测试用例,找到更

    2024年01月18日
    浏览(44)
  • vue+jest 单元测试配置+用例

    目录 目录 1 Jest 说明文档 2 1、 搭建node环境包 2 这里安装环境是node 18,npm 9.5.0。 2 Test Runner 2 2、 安装jest 3 Jest安装步骤 4 项目的根目录下创建一个.babelrc 配置文件: 4 在项目的根目录下创建 jest.config.js 4 3、 全局设定 5 预处理和后处理 5 方法 6 4、 断言 6 真假断言 6 数字断言

    2024年02月07日
    浏览(38)
  • Jest单元测试Vue项目实践

    ​ 做单元测试的优点: 1.减少bug避免低级错误 2.提高代码运行质量 3.快速定位问题 4.减少调试时间,提高开发效率 5.便于重构 Jest安装: 配置 vueCli内置了一套jest配置预置文件,一般情况下直接引用即可,如有特殊配置可见下文配置释意。 配置项目释意 module.exports = { 相关

    2024年02月12日
    浏览(41)
  • jest单元测试支持ts文件方案

    jest配置 jest配置如下: 额外配置说明: 其中transform增加了jest的es6处理能力。默认情况下jest只能处理require文件,当配置tranform后可以对impoet文件进行处理 prese和testEnvironment为jest增加ts处理能力 注意jest文件应当放在需要进行单元测试的目录,jest将按照其配置文件所子目录按照

    2024年02月14日
    浏览(34)
  • Jest:给你的 React 项目加上单元测试

    大家好,我是前端西瓜哥。 Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 单元测试 (Unit Testing),指的是对程序中的模块(最小单位)进行检查和验证。比如一个函数、一个类、一个组件,

    2024年02月09日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包