WSL2 環境で Angular のテストを動かす
いつ頃からか、Angular の ng test コマンドがデフォルトで Chrome ブラウザを使用するようになっていた。karma-chrome-launcher が使われている。
WSL 環境だとデフォルトでは Chrome をインストールしていないと思うので、次のようなエラーになる。
$ npm run test
> tester@0.0.0 test
> ng test
✔ Browser application bundle generation complete.
19 04 2023 13:51:46.868:WARN [karma]: No captured browser, open http://localhost:9876/
19 04 2023 13:51:46.875:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
19 04 2023 13:51:46.875:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
19 04 2023 13:51:46.878:INFO [launcher]: Starting browser Chrome
19 04 2023 13:51:46.879:ERROR [launcher]: No binary for Chrome browser on your platform.
Please, set "CHROME_BIN" env variable.
Windows ホスト側にある Chrome ブラウザを使うよう指定することも不可能ではないらしいが、今回は WSL 側にも Chrome をインストールすることにする。やり方は、よくある Ubuntu マシンへの Chrome インストール方法と同じ。
- 参考 : UbuntuにChromeをインストールする - Qiita
- 参考 : 【Ubuntu Server 20.04】Google Chromeをインストールする手順 | PostgresWeb - ポスグレウェブ
# Chrome がインストールされていないことを確認する
$ apt list --installed google*
一覧表示... 完了
# パッケージリストを追加する
$ ls -l /etc/apt/sources.list.d
-rw-r--r-- 1 root root 393 2018-04-21 01:48 ubuntu-ja.list
$ sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list'
$ ls -l /etc/apt/sources.list.d
-rw-r--r-- 1 root root 55 2023-04-19 13:53 google.list
-rw-r--r-- 1 root root 393 2018-04-21 01:48 ubuntu-ja.list
# 公開鍵を追加する
$ sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
OK
$ sudo apt update
# Chrome がインストール可能な状態になった
$ apt list google*
一覧表示... 完了
google-chrome-stable/stable 112.0.5615.121-1 amd64
# Chrome をインストールする
$ sudo apt-get install google-chrome-stable
$ apt list --installed google*
一覧表示... 完了
google-chrome-stable/stable,now 112.0.5615.121-1 amd64 [インストール済み]
この手順は WSL でない素の Ubuntu マシンでもよくあるやり方。Chrome をインストールすればテストが動くようになる。
$ npm run test
> tester@0.0.0 test
> ng test
✔ Browser application bundle generation complete.
19 04 2023 13:55:52.460:WARN [karma]: No captured browser, open http://localhost:9876/
19 04 2023 13:55:52.467:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
19 04 2023 13:55:52.467:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
19 04 2023 13:55:52.470:INFO [launcher]: Starting browser Chrome
19 04 2023 13:55:54.708:INFO [Chrome 112.0.0.0 (Linux x86_64)]: Connected on socket JJIyF6Go70h6kG1pAAAB with id 38230048
Chrome 112.0.0.0 (Linux x86_64): Executed 3 of 3 SUCCESS (0.115 secs / 0.095 secs)
TOTAL: 3 SUCCESS
いわゆる WSLg というヤツか、Ubuntu デスクトップ側の Chrome ブラウザがうまいこと開いて、Karma のテスト結果ページが表示される。
じゃあ ng e2e の方はどうなっているのかというと、Cypress・Nightwatch・WebdriverIO のいずれかのフレームワークを選んで実装できるように、オプション式になっているみたい。Protractor とか止めたのね。
いつの間にかいろいろ変わってて戸惑った。
