VS Code拡張機能をExtension Test Runnerを使用してテストする – 【VS Code】

VS Code拡張機能をExtension Test Runnerを使用してテストする – 【VS Code】

VS Code拡張機能開発時のテスト方法です。Extension Test Runner拡張機能を使用します。

前提

• TypeScriptで開発
• npm,node.js,yo,generator-codeなどインストール済み（npm install -g yo generator-code）
• yo codeで作成済み
• テストフレームワークはMocha

Extension Test Runner

Extension Test Runnerをインストールします。

依存関係

VSCode拡張機能テスト用ツール群をインストールします。※Yeomanで作成した場合は既に入っている

npm install --save-dev @vscode/test-cli @vscode/test-electron

@types/mochaをインストールします。※Yeomanで作成した場合は既に入っている

※VSCodeのテストホスト自身がMochaテストフレームワークを組み込んで提供するようなのでmocha本体のインストールは不要のようです。

npm i --save-dev @types/mocha

npm script

package.jsonに、テスト実行用のnpm scriptを追加します。※Yeomanで作成した場合は既に入っている

"scripts": {
  "test": "vscode-test" // この1行がなければ追加
}

これで、現在の作業ディレクトリを基準とした.vscode-test.js/mjs/cjsファイルを探すようになります。

.vscode-test.js/mjs/cjs

プロジェクト直下に.vscode-test.js/mjs/cjsを作成します。

filesのみ必須項目で、この項目ではテストスイートのエントリーポイントとなるファイルの場所を指定します。

.vscode-test.cjsのサンプル

// .vscode-test.cjs
const { defineConfig } = require('@vscode/test-cli');

module.exports = defineConfig([
  {
    label: 'unitTests',
    files: 'out/test/**/*.test.js',
    version: 'insiders',
    workspaceFolder: './sampleWorkspace',
    mocha: {
      ui: 'tdd',
      timeout: 20000
    }
  }
  // you can specify additional test configurations, too
]);

.vscode-test.mjsのサンプル

// .vscode-test.mjs
import{ defineConfig } = from '@vscode/test-cli';

export default defineConfig([
  {
    label: 'unitTests',
    files: 'out/test/**/*.test.js',
    version: 'insiders',
    workspaceFolder: './sampleWorkspace',
    mocha: {
      ui: 'tdd',
      timeout: 20000
    }
  }
  // you can specify additional test configurations, too
]);

Yeomanで作成した場合の.vscode-test.mjs

import { defineConfig } from '@vscode/test-cli';

export default defineConfig({
	files: 'out/test/**/*.test.js',
});

src/test/suite/extension.test.ts

extension.test.tsを作成します。（extension部分は自由、Yeomanで作成した場合は既にファイルがあるかもしれない）

import * as assert from 'assert';

// You can import and use all API from the 'vscode' module
// as well as import your extension to test it
import * as vscode from 'vscode';
// import * as myExtension from '../../extension';

suite('Extension Test Suite', () => {
	vscode.window.showInformationMessage('Start all tests.');

	test('Sample test', () => {
		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
	});
});

import * as vscode from 'vscode';によりVS CodeのAPIが使えるようになります。

jsにトランスパイル

extension.test.tsをトランスパイルします。

npx tsc -p . --outDir out

テスト実行

npm testコマンドでテスト実行します。以下のような標準出力が出ればＯＫです。

Extension Test Suite
✔ Sample test
1 passing (71ms)

デバッグ

mochaのテストコードにブレークポイントをはって止めるにはlaunch.jsonで以下の「Run Extension」を実行すれば止めることが出来ます。

Yeomanで作成した場合のlaunch.json

// A launch configuration that compiles the extension and then opens it inside a new window
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Run Extension",
			"type": "extensionHost",
			"request": "launch",
			"args": [
				"--extensionDevelopmentPath=${workspaceFolder}"
			],
			"outFiles": [
				"${workspaceFolder}/dist/**/*.js"
			],
			"preLaunchTask": "${defaultBuildTask}"
		}
	]
}

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^