国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

在單元測(cè)試中使用Jest模擬VS Code extension API

這篇具有很好參考價(jià)值的文章主要介紹了在單元測(cè)試中使用Jest模擬VS Code extension API。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

  對(duì)VS Code extension進(jìn)行單元測(cè)試時(shí)通常會(huì)遇到一個(gè)問題,代碼中所使用的VS Code編輯器的功能都依賴于vscode庫,但是我們?cè)趩卧獪y(cè)試中并沒有添加對(duì)vscode庫的依賴,所以導(dǎo)致運(yùn)行單元測(cè)試時(shí)出錯(cuò)。由于vscode庫是作為第三方依賴被引入到我們的VS Code extension中的,所以它并不受我們的控制,最好的辦法就是在單元測(cè)試中對(duì)其中的API進(jìn)行模擬。本文中我將介紹如何使用Jest來模擬vscode庫的API。

  如果你還不太熟悉如何開始創(chuàng)建一個(gè)VS Code extension,這里的文檔可以教你快速上手。

  創(chuàng)建好VS Code extension項(xiàng)目后,你會(huì)發(fā)現(xiàn)在根目錄下有一個(gè)package.json文件,VS Code extension會(huì)從中讀取配置項(xiàng)來管理UI界面元素,在實(shí)際開發(fā)中你可能會(huì)使用到其中的一些屬性。我們可以通過package.json來設(shè)置項(xiàng)目所需要的依賴項(xiàng),這里我們將Jest添加為dev dependency,并添加npm腳本以運(yùn)行Jest單元測(cè)試。

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

模擬VS Code node module

  Jest提供了一些mocking的選項(xiàng),但是因?yàn)槲覀兿胍M整個(gè)vscode node module,所以最簡單的辦法是在與node_modules文件夾相同的位置(通常是項(xiàng)目的根目錄)創(chuàng)建一個(gè)__mocks__文件夾,并在其中添加一個(gè)與要模擬的模塊名稱相同的文件(vscode.js)。

  你不需要在測(cè)試代碼中導(dǎo)入該模塊,mock會(huì)自動(dòng)加載它。Jest稱此為manual mocks。

  這種方法最大的好處是它能將我們的測(cè)試代碼與所依賴的模塊分離,使測(cè)試代碼看起來更加整潔。這里有一個(gè)小問題,新加入的開發(fā)者需要知道__mocks__文件夾,否則很難理解單元測(cè)試是如何正常工作的,因?yàn)閱卧獪y(cè)試中并沒有VS Code模塊被模擬的代碼。

  以下就是對(duì)VS Code模塊進(jìn)行模擬的代碼。我們并沒有模擬整個(gè)API,你可以根據(jù)需要進(jìn)行調(diào)整。

// 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模塊的示例

  我的開源項(xiàng)目Git Mob for VS code中使用了這種方法,我將用其中的代碼來說明如何使用模擬的VS Code模塊。

  下面的例子中,VS Code編輯器的狀態(tài)欄會(huì)根據(jù)Git鉤子prepare-commit-msg是否被調(diào)用來做相應(yīng)的調(diào)整,你可以看到這里我并沒有將vscode模塊導(dǎo)入到我的測(cè)試文件中并對(duì)其進(jìn)行模擬。

// 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模塊中的方法是否被調(diào)用了嗎?

  你可以導(dǎo)入模擬的vscode模塊。下面的代碼中,我想要檢查當(dāng)用戶修改co-author文件時(shí)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的標(biāo)準(zhǔn)用法,這意味著我們可以在代碼中正常使用vscode模塊的方法,而不受manual mock的任何限制。例如,我們還可以使用mockImplementation來修改實(shí)現(xiàn)。

  更多示例可以查看這里的源代碼:

  • reload-on-save.spec.js

  編寫單元測(cè)試最大的好處是可以快速得到反饋結(jié)果,如果你對(duì)TDD(Test-Driven Development,測(cè)試驅(qū)動(dòng)開發(fā))情有獨(dú)鐘,那么單元測(cè)試將使你對(duì)VS Code extension的開發(fā)更加信心滿滿。

原文地址:Unit test & mock VS Code extension API with Jest文章來源地址http://www.zghlxwxcb.cn/news/detail-634740.html

到了這里,關(guān)于在單元測(cè)試中使用Jest模擬VS Code extension API的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • Junit單元測(cè)試 org.junit.jupiter.api.extension.ParameterResolutionException異常處理

    Junit單元測(cè)試 org.junit.jupiter.api.extension.ParameterResolutionException異常處理

    想根據(jù)Id查詢信息,在Junit單元測(cè)中報(bào)錯(cuò) @Test 單元測(cè)試方法中不允許添加參數(shù) 將 (Integer id) 刪除即可,但這樣必須手動(dòng)添加調(diào)用方法中的id,并且只能測(cè)試查詢單條數(shù)據(jù),比如我要查詢id=1的數(shù)據(jù),就只能手動(dòng)在括號(hào)里添加1 如果我要查詢多條數(shù)據(jù),自定義參數(shù)的話,可以使用參

    2023年04月22日
    瀏覽(25)
  • 單元測(cè)試(jest):理解、安裝、使用

    單元測(cè)試(jest):理解、安裝、使用

    一、理解單元測(cè)試的重要性 bug發(fā)現(xiàn)在開發(fā)階段,成本很低, 如果發(fā)現(xiàn)在生產(chǎn)環(huán)境,成本很高, 如果是關(guān)鍵時(shí)刻,決定人生命運(yùn),決定企業(yè)發(fā)展。 從技術(shù)的角度講,有效的提高代碼的健壯性,有效的增加代碼的可維護(hù)性,對(duì)于后期的代碼重構(gòu)是必要條件。 從團(tuán)隊(duì)的角度講,

    2024年02月03日
    瀏覽(23)
  • 快速上手 Jest 單元測(cè)試框架:使用 Jest Preset 加速配置,靈活應(yīng)對(duì)項(xiàng)目需求

    Jest preset 參數(shù)的作用是提供一個(gè)預(yù)先定義好的配置集合,以便于快速開始使用 Jest 單元測(cè)試框架。你可以選擇現(xiàn)有的 preset,如 jest-preset-angular 、 create-react-app 或自定義 preset,以根據(jù)你的項(xiàng)目需求自動(dòng)應(yīng)用一系列配置。 使用示例: 先安裝一個(gè)現(xiàn)有的 preset,例如 jest-preset-angul

    2024年02月06日
    瀏覽(29)
  • vue jest單元測(cè)試

    vue-test-utils 提供了兩種方式用于渲染,或者說 加載(mount) 一個(gè)組件 — mount 和 shallowMount 。一個(gè)組件無論使用這兩種方法的哪個(gè)都會(huì)返回一個(gè) wrapper ,也就是一個(gè)包含了 Vue 組件 的對(duì)象,輔以一些對(duì)測(cè)試有用的方法。 mount : 會(huì)渲染子組件 shallowMount :會(huì)加載子組件,不會(huì)被

    2024年02月05日
    瀏覽(22)
  • Jest單元測(cè)試(一)

    Jest是Facebook一套開源的 JavaScript 測(cè)試框架,它自動(dòng)集成了斷言、JSDom、覆蓋率報(bào)告等測(cè)試工具。 他適用但不局限于使用以下技術(shù)的項(xiàng)目:Babel, TypeScript, Node, React, Angular, Vue 官網(wǎng)地址:https://jestjs.io/en/ 使用 yarn 安裝 Jest︰ 或 npm: 注:Jest的文檔統(tǒng)一使用yarn命令,不過使用npm也

    2024年02月16日
    瀏覽(25)
  • vue 引入jest 單元測(cè)試

    vue 引入jest 單元測(cè)試

    為什么要搞單元測(cè)試,好處有什么。 提測(cè)需要, 代碼覆蓋率達(dá)到95%,分支覆蓋率達(dá)到100% ,不達(dá)到要求,不給測(cè)。 確保代碼正確性。單元測(cè)試可以檢測(cè)和發(fā)現(xiàn)代碼中的錯(cuò)誤,在開發(fā)期間及時(shí)糾正。 提高代碼質(zhì)量。進(jìn)行單元測(cè)試可以思考更多場景,添加邊界測(cè)試用例,找到更

    2024年01月18日
    瀏覽(26)
  • vue+jest 單元測(cè)試配置+用例

    目錄 目錄 1 Jest 說明文檔 2 1、 搭建node環(huán)境包 2 這里安裝環(huán)境是node 18,npm 9.5.0。 2 Test Runner 2 2、 安裝jest 3 Jest安裝步驟 4 項(xiàng)目的根目錄下創(chuàng)建一個(gè).babelrc 配置文件: 4 在項(xiàng)目的根目錄下創(chuàng)建 jest.config.js 4 3、 全局設(shè)定 5 預(yù)處理和后處理 5 方法 6 4、 斷言 6 真假斷言 6 數(shù)字?jǐn)嘌?/p>

    2024年02月07日
    瀏覽(20)
  • Jest單元測(cè)試Vue項(xiàng)目實(shí)踐

    Jest單元測(cè)試Vue項(xiàng)目實(shí)踐

    ? 做單元測(cè)試的優(yōu)點(diǎn): 1.減少bug避免低級(jí)錯(cuò)誤 2.提高代碼運(yùn)行質(zhì)量 3.快速定位問題 4.減少調(diào)試時(shí)間,提高開發(fā)效率 5.便于重構(gòu) Jest安裝: 配置 vueCli內(nèi)置了一套jest配置預(yù)置文件,一般情況下直接引用即可,如有特殊配置可見下文配置釋意。 配置項(xiàng)目釋意 module.exports = { 相關(guān)

    2024年02月12日
    瀏覽(23)
  • jest單元測(cè)試支持ts文件方案

    jest配置 jest配置如下: 額外配置說明: 其中transform增加了jest的es6處理能力。默認(rèn)情況下jest只能處理require文件,當(dāng)配置tranform后可以對(duì)impoet文件進(jìn)行處理 prese和testEnvironment為jest增加ts處理能力 注意jest文件應(yīng)當(dāng)放在需要進(jìn)行單元測(cè)試的目錄,jest將按照其配置文件所子目錄按照

    2024年02月14日
    瀏覽(24)
  • Jest:給你的 React 項(xiàng)目加上單元測(cè)試

    Jest:給你的 React 項(xiàng)目加上單元測(cè)試

    大家好,我是前端西瓜哥。 Jest 是一款輕量的 JavaScript 測(cè)試框架,它的賣點(diǎn)是簡單好用,由 facebook 出品。本文就簡單講講如何使用 Jest 對(duì) React 組件進(jìn)行測(cè)試。 單元測(cè)試 (Unit Testing),指的是對(duì)程序中的模塊(最小單位)進(jìn)行檢查和驗(yàn)證。比如一個(gè)函數(shù)、一個(gè)類、一個(gè)組件,

    2024年02月09日
    瀏覽(12)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包