南宁市做网站的公司,自己写的html放入wordpress,购物网站开发计划书,做搜索引擎优化对网站有哪些好处对VS Code extension进行单元测试时通常会遇到一个问题#xff0c;代码中所使用的VS Code编辑器的功能都依赖于vscode库#xff0c;但是我们在单元测试中并没有添加对vscode库的依赖#xff0c;所以导致运行单元测试时出错。由于vscode库是作为第三方依赖被引入到我们的VS C…对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.jsconst 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.jsconst { 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.jsgit-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 编写单元测试最大的好处是可以快速得到反馈结果如果你对TDDTest-Driven Development测试驱动开发情有独钟那么单元测试将使你对VS Code extension的开发更加信心满满。 资料获取方法
【留言777】 各位想获取源码等教程资料的朋友请点赞 评论 收藏三连
三连之后我会在评论区挨个私信发给你们~
