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

桃扇骨 2023-10-14 16:41 38阅读 0赞

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

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

创建好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的开发更加信心满满。

**最后：**下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取**【保100%免费】**

![8b0171187dce405e878f274a8cdd9ec0.png][]

#### **软件测试面试文档** ####

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

![a3e4226c935c4242804cbdf26b571bc6.png][]

![58df6cd288094ad8874e814f2477620b.gif][]

[Jest]: https://jestjs.io/docs/en/mock-functions
[Link 1]: https://code.visualstudio.com/api/get-started/your-first-extension
[manual mocks]: https://jestjs.io/docs/en/manual-mocks
[Git Mob for VS code]: https://github.com/rkotze/git-mob-vs-code
[git-mob-hook-status.spec.js]: https://github.com/rkotze/git-mob-vs-code/blob/a440b57dc3f991105aba30b41e7d77af118de73a/src/status-bar/git-mob-hook-status.spec.js
[git-mob-hook-status.js]: https://github.com/rkotze/git-mob-vs-code/blob/a440b57dc3f991105aba30b41e7d77af118de73a/src/status-bar/git-mob-hook-status.js
[reload-on-save.spec.js]: https://github.com/rkotze/git-mob-vs-code/blob/baf86ae15bf359bf409a6a3bdc7ac74850640433/src/reload-on-save.spec.js
[8b0171187dce405e878f274a8cdd9ec0.png]: https://img-blog.csdnimg.cn/8b0171187dce405e878f274a8cdd9ec0.png
[a3e4226c935c4242804cbdf26b571bc6.png]: https://img-blog.csdnimg.cn/a3e4226c935c4242804cbdf26b571bc6.png
[58df6cd288094ad8874e814f2477620b.gif]: https://img-blog.csdnimg.cn/58df6cd288094ad8874e814f2477620b.gif