在单元测试中使用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

1. {

2. "scripts": {

3. "test": "jest"

4. }

5. }

模拟VS Code node module

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

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

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

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

1. // vscode.js

3. const languages = {

4. createDiagnosticCollection: jest.fn()

5. };

7. const StatusBarAlignment = {};

9. const window = {

10. createStatusBarItem: jest.fn(() => ({

11. show: jest.fn()

12. })),

13. showErrorMessage: jest.fn(),

14. showWarningMessage: jest.fn(),

15. createTextEditorDecorationType: jest.fn()

16. };

18. const workspace = {

19. getConfiguration: jest.fn(),

20. workspaceFolders: [],

21. onDidSaveTextDocument: jest.fn()

22. };

24. const OverviewRulerLane = {

25. Left: null

26. };

28. const Uri = {

29. file: f => f,

30. parse: jest.fn()

31. };

32. const Range = jest.fn();

33. const Diagnostic = jest.fn();

34. const DiagnosticSeverity = { Error: 0, Warning: 1, Information: 2, Hint: 3 };

36. const debug = {

37. onDidTerminateDebugSession: jest.fn(),

38. startDebugging: jest.fn()

39. };

41. const commands = {

42. executeCommand: jest.fn()

43. };

45. const vscode = {

46. languages,

47. StatusBarAlignment,

48. window,

49. workspace,

50. OverviewRulerLane,

51. Uri,

52. Range,

53. Diagnostic,

54. DiagnosticSeverity,

55. debug,

56. commands

57. };

59. module.exports = vscode;

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

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

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

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

3. const { hasPrepareCommitMsgTemplate } = require("../prepare-commit-msg-file");

4. const { gitMobHookStatus } = require("./git-mob-hook-status");

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

8. describe("Hook or template status", function() {

9. let mockContext;

10. beforeAll(function() {

11. mockContext = {

12. subscriptions: []

13. };

14. });

16. afterEach(function() {

17. hasPrepareCommitMsgTemplate.mockReset();

18. });

20. it("using git template for co-authors", () => {

21. hasPrepareCommitMsgTemplate.mockReturnValue(false);

22. const statusBar = gitMobHookStatus({ context: mockContext })();

23. expect(statusBar).toEqual(

24. expect.objectContaining({

25. text: "$(file-code) Git Mob",

26. tooltip: "Using .gitmessage template"

27. })

28. );

29. });

31. it("using git prepare commit msg for co-authors", () => {

32. hasPrepareCommitMsgTemplate.mockReturnValue(true);

33. const statusBar = gitMobHookStatus({ context: mockContext })();

34. expect(statusBar).toEqual(

35. expect.objectContaining({

36. text: "$(zap) Git Mob",

37. tooltip: "Using prepare-commit-msg hook"

38. })

39. );

40. });

41. });

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

2. const vscode = require("vscode");

3. const { hasPrepareCommitMsgTemplate } = require("../prepare-commit-msg-file");

5. function gitMobHookStatus({ context }) {

6. const myStatusBarItem = vscode.window.createStatusBarItem(

7. vscode.StatusBarAlignment.Left,

8. 10

9. );

10. context.subscriptions.push(myStatusBarItem);

11. return function() {

12. myStatusBarItem.text = "$(file-code) Git Mob";

13. myStatusBarItem.tooltip = "Using .gitmessage template";

14. if (hasPrepareCommitMsgTemplate()) {

15. myStatusBarItem.text = "$(zap) Git Mob";

16. myStatusBarItem.tooltip = "Using prepare-commit-msg hook";

17. }

18. myStatusBarItem.show();

19. return myStatusBarItem;

20. };

21. }

23. exports.gitMobHookStatus = gitMobHookStatus;

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

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

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

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

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

3. // ...

4. test("Reload co-author list when git-coauthors file saved", () => {

5. reloadOnSave(coAuthorProviderStub);

6. expect(vscode.workspace.onDidSaveTextDocument).toHaveBeenCalledWith(

7. expect.any(Function)

8. );

9. // ...

10. });

11. // ...

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

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

• reload-on-save.spec.js

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

 

感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

 

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你!有需要的小伙伴可以点击下方小卡片领取