はじめに
公式exampleを気になる所を調べつつ一緒に構築してみるだけという無情な記事です。
公式にガイドがあります。
読んでみたのですが、恐らく素直に最後にあるexampleのコードを読んだ方がわかりやすい気がしましたので、こちらを読みつつなんじゃこれをやっていきます。
mkdir & npm i
cd mkdir hoge
cd hoge
npm init --y
npm i -D puppeteer
npm i -D jest
configファイルと作る大体の構造
jestのconfigファイルを作る。中身はこちらです。
globalSetup: './setup.js',
globalTeardown: './teardown.js',
testEnvironment: './puppeteer_environment.js',
configのドキュメントはこちらです。 https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string
globalSetup- 全てのテスト実行前に一度実行される非同期関数
globalTeardown- 全てのテスト実行後に一度実行される非同期関数
testEnvironment- (曖昧）
- テストに使用されるテスト環境。
- Jestのデフォルト環境は、jsdom
- 違うものを使いたい場合はsetup/teadownを使用して
this.globalにその環境を定義（＆終了後開放）してテストの際に使用する
setup.js
chalkはlogに色を付けてくれるやつです。
あとはpuppeteerとnodeのモジュールです。
global.__BROWSER__ = browser
global.__BROWSER__ に launch した puppeteerを定義しています。
mkdirp.sync(DIR)
fs.writeFileSync(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint())
起動したchromiumのwsEndpointをファイルに書き込んでいます。
wsEndpoint なんやねんってのがわからず適当ggrksだと出てきませんでした。
（曖昧) 別で起動しているchromiumに接続できるものかと思います。
この辺りとこの辺りに記載がありました。 Browser websocket url. 詳細は後者リンク先へ。
puppeteer_environment.js
中身は例によってこちら
jestはデフォルトではjsdomを使用するらしいですが、
puppeteerを使用したいのでpuppeteerを使用できるように定義します。
この設定はこの辺りですね。
teardown.js
setup.jsで起動したchromiumを閉じて、setup時にwsEndpointを書き出した一時ファイルを削除します。
test.js
いくつかサンプルがありますが1を
テスト毎（テストファイルのたび）に launch するのではなくて既に起動済の global.__BROWSER__ を使用できています。
特に終わった後もページを閉じる await page.close() だけでテストのファイルは終わっています。
おわり
ということでpuppeteerとjestを使って組み合わせる場合、
テスト毎にchromiumを起動していると速度面でも負荷面でも時間面でもデメリットがあるので、
全体で一度起動して定義、テストの中では起動したchromiumでタブを開いてテストして閉じる、全テスト終了後にchromiumを閉じる、
という風にしたほうが良いですね。
というサンプルでした！
（余談）
1ファイルテストした時には test や describe 毎にlogが出ていたのに2ファイルにしたら出なくなった場合
jest の verbose を有効にすると全部出ます！意外とはまりました。
https://facebook.github.io/jest/docs/en/configuration.html#verbose-boolean