【JavaScript/テスト】素のスクリプトを、GitHub Actionsでコードテストさせる

はじめに

自分の環境を汚さずに、単体テストしたいですよね。

特に環境が重い重いNode.jsアンチの僕は、ブラウザ用のためだけにJavaScriptライブラリを単体テストしたいと思っても、テストのためだけにnpmなんたらかんたらで自分の環境を汚したくありません。

なので、GitHubに肩代わりしてもらいましょう。

手順

素ファイルをエクスポート

テストしたい素.jsファイルの末尾に、この2行を追加

if (typeof module !== "undefined") 
    module.exports = { 関数あるいはクラス }

これはNode.js用の処理ですが、見ての通りif文で限定しているので、Node.js不使用時には影響を及ぼしません。

テストコード

Jestを使います

テストコードのファイル名は
(ファイル名).test.js
にしてください

例です。

//import
const {Quaternion} = require("./Quaternion.js")

test("constructor", () => {
	const q = new Quaternion(1, 2, 3, 4)
	expect(q.x).toBeCloseTo(1)
	expect(q.y).toBeCloseTo(2)
	expect(q.z).toBeCloseTo(3)
	expect(q.w).toBeCloseTo(4)
})

test("eulerAngles() zero-test", () => {
	const q = new Quaternion(0, 0, 0, 1)
	const e = q.eulerAngles
	expect(e[0]).toBeCloseTo(0)
	expect(e[1]).toBeCloseTo(0)
	expect(e[2]).toBeCloseTo(0)
})

test("eulerAngles()", () => {
	const q = new Quaternion(1, 2, 3, 4).normalized
	const e = q.eulerAngles
	expect(e[0]).toBeCloseTo(352.34, 2)
	expect(e[1]).toBeCloseTo(47.73, 2)
	expect(e[2]).toBeCloseTo(70.35, 2)
})

大事なのは冒頭、前項でエクスポートした関数ないしクラスをインポートします。

const {クラス名, 関数名, ...} = require("jsファイルへのパス")

そして、テストしたいことを書きつづけてください。

test("テスト名(結果で表示される)", () => {
	//テストする処理
})

テスト処理の書き方はJestドキュメンテーション参照で。

Node.js設定

GitHubに読ませるNode.jsの設定ファイルを書きこまねばなりません。
コピペで大丈夫ですし、書いてもNode.js未使用環境では仕様に影響ありません

package.json

{
    "scripts": {
        "test": "jest"
    },
    "jest": {
        "testMatch": [
            "**/*.test.js"
        ]
    },
    "devDependencies": {
        "jest": "^24.8.0"
    }
}

このpackage.jsonをレポジトリ直下に設置

GitHub Actionsの設定

(レポジトリ直下)/.github/workflowsディレクトリに、下記をコピペ。

UnitTest.yml

name: unittest

on:
  pull_request:
    branches: [ main ]
  push:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Setup Nodejs
        uses: actions/setup-node@v1
        with:
          node-version: 16

      - name: Unit test
        run: |
          npm install
          npm test

結果

mainブランチにプルリクしたり直接pushすると、自動でGitHubがコードテストしてくれます

プルリク例

コードテスト失敗時例