Visual Studio CodeのテストエクスプローラーでPythonのテスト結果アイコンが二重になる場合の解決方法

Visual Studio CodeのテストエクスプローラーでPythonのテストを行う際､
テスト結果アイコンが二重になり､見栄えの悪い状態になりました｡
それを解決したので記事にします｡

本記事の想定読者

• Visual Studio Codeユーザー
• 拡張機能 Python Test Explorerユーザー
• Pythonでテストをする時にコード左側のテスト結果アイコンが二重になってなんとかしたいと思っている

本記事で解決したい問題

以下の画像のようにコード左側のテスト結果のアイコンが二重になっている状態を解決します｡

解決後の表示はたとえば以下の画像のとおり｡(画像は後述の解決方法3を選んだ場合の表示です)

用語の注意

以下本記事では Visual Studio Code のことをvscodeと呼びます｡

結論

• vscodeのネイティブなテストUIと拡張機能のテストUIが同時に作用して二重になっている模様
• 筆者が解決方法として考えたのは以下の3通り
  1. 拡張機能 Python Test Explorer を無効化してネイティブUIのみにする
  2. テストエクスプローラーでもネイティブUIを使うようにする
  3. テストエクスプローラーのテスト結果アイコンを非表示にする

なお､筆者は3を選択しました｡
テストエクスプローラーのautorunが便利だったからです｡
詳細は後述します｡

解決方法の詳細

環境情報

筆者はMacユーザーで､vscodeの拡張機能の以下を有効にしています｡

• Python
• Test Explorer UI
• Python Test Explorer for Visual Studio Code

検証の際はワークスペースで他の拡張機能をなるべく無効化しましたが､
他に影響を与えている要素もあるかもしれません｡予めご了承ください｡

vscodeのバージョン情報および拡張機能の詳細は以下に記載します｡

環境情報詳細(クリックで表示)

vscodeのバージョン情報

バージョン: 1.65.2
コミット: c722ca6c7eed3d7987c0d5c3df5c45f6b15e77d1
日付: 2022-03-10T14:33:49.188Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Darwin x64 21.3.0

有効な拡張機能の一覧(画像)

拡張機能の詳細

名前: Python
ID: ms-python.python
説明: IntelliSense (Pylance), Linting, Debugging (multi-threaded, remote), Jupyter Notebooks, code formatting, refactoring, unit tests, and more.
バージョン: 2022.2.1924087327
パブリッシャー: Microsoft
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=ms-python.python

名前: Test Explorer UI
ID: hbenl.vscode-test-explorer
説明: Run your tests in the Sidebar of Visual Studio Code
バージョン: 2.21.1
パブリッシャー: Holger Benl
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer

名前: Python Test Explorer for Visual Studio Code
ID: littlefoxteam.vscode-python-test-adapter
説明: Run your Python tests in the Sidebar of Visual Studio Code
バージョン: 0.7.0
パブリッシャー: Little Fox Team
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=LittleFoxTeam.vscode-python-test-adapter

原因

• vscodeのネイティブなテストUIと拡張機能のテストUIが同時に作用している

他にも原因がありそうでしたらご指摘ください｡

解決方法1: 拡張機能 Python Test Explorer を無効化してネイティブUIのみにする

• [拡張機能]を開く
• [Python Test Explorer]の歯車アイコンをクリックする
• [無効にする]を選択する

拡張機能が無効化されるのでネイティブUIだけが作用するようになり､二重化を解消できます｡

解決方法2: テストエクスプローラーでもネイティブUIを使うようにする

• [設定]を開く
• [Test Explorer: Use Native Testing]の項目にチェックを入れる

拡張機能は有効ですが､テスト結果の表示はネイティブUIに統一されるので､二重化を解消できます｡

また､vscodeのsettingを直接変更することもできます｡

vscodeのsettingファイル

	"settings": {
		"testExplorer.useNativeTesting": true
	}

解決方法3: テストエクスプローラーのテスト結果アイコンを非表示にする

• [設定]を開く
• [Testing: Gutter Enabled]の項目のチェックを外す

ネイティブUIのテスト結果アイコンを非表示にします｡
拡張機能のテスト結果アイコンだけが表示されるようになるので､二重化を解消できます｡

また､vscodeのsettingを直接変更することもできます｡

vscodeのsettingファイル

	"settings": {
		"testing.gutterEnabled": false,
	}

解決方法を実行したあとの画面表示

解決方法1､2を実行した場合の画面表示は以下のようになりました｡

解決方法3を実行した場合の画面表示は以下のようになりました｡

補足

• vscodeのテストネイティブUIのsettingはTesting
• 拡張機能のテストエクスプローラーのsettingはtestExplorer
• Gutterは側溝のこと｡ボーリングのガーターと同じ｡(へ〜)

筆者が解決方法3を選んだ理由: autorun

Python Test Explorerの自動テストが便利だったからです｡
ファイルを保存する度にテストが走るので､わざわざ手動でテストを走らせる必要がなくなります｡

もしかするとネイティブUIの方でも自動でテストができるのかもしれませんが､
少なくともテストエクスプローラー画面を右クリックしただけでは見つからず｡

ネイティブUIで右クリックした場合の表示

Python Test Explorerで右クリックした場合の表示

なお､テストエクスプローラーの画面でネイティブUIを非表示にすることもできます｡
ネイティブUIの[テスト エクスプローラー]を右クリックして
[テストエクスプローラー]のチェックを外せばOKです｡

まとめ

• vscodeでテスト結果アイコンがかぶるときはネイティブUIか拡張機能の設定を変更すればよい