GitHub ActionsでTypeScript+Jestでテストを通してみる

# はじめに

[GitHub ActionsにCI/CD機能を搭載〜パブリックリポジトリでは無料で利用可能](https://github.blog/jp/2019-08-21-github-actions-now-supports-ci-cd/)ということでGitHub単体でCI/CDできるなんて胸アツである。というわけで実際にWorkflowを作って試してみたいと思う。

とりあえず何でも良かったんだけど、ぱっと思いついたTypeScript + Jestでpush時にテストを通すというのをやってみました。

# やってみた

やってみたレポジトリは[こちら](https://github.com/bathtimefish/github-actions-test)

## ソースコードを用意する

まず、必要なモジュールをインストールする

```shell
npm init -f
npm i -D typescript jest ts-jest @types/jest
```

以下のようにソースコードを用意する

```add.ts
const add = (a, b) => {
  return a + b;
}

export default add;
```

```tests/add.test.ts
import add from "../add";

describe('add', (): void => {
  test('should return 3', (): void => {
    const result: number = add(1, 2);
    expect(result).toEqual(3);
  });
});
```

```tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
  }
}
```

`package.json`にはJestの設定をしておく

```package.json
{
  "name": "github-actions-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": ["ts", "js"],
    "transform": { "^.+\\.ts$": "ts-jest" },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "testMatch": ["**/tests/*.test.ts"]
  },
  "keywords": [],
  "author": "bathtimefish",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^24.0.18",
    "jest": "^24.9.0",
    "ts-jest": "^24.0.2",
    "typescript": "^3.6.2"
  }
}
```

ディレクトリ構成は以下のようになる

```shell
tree -L 2
.
├── Readme.md
├── add.ts
├── main.ts
├── node_modules
│   └── (省略)
├── package-lock.json
├── package.json
├── tests
│   └── add.test.ts
└── tsconfig.json
```

`npm test`を実行して正常にテストが実行されることを確認する

```shell
npm test

> github-actions-test@1.0.0 test /Users/btf/src/work/github-actions-test
> jest

 PASS  tests/add.test.ts
  add
    ✓ should return 3 (7ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.151s
Ran all test suites.
```

準備ができたので、GitHubで適当なレポジトリを作ってコードをpushする

## Workflowを作成する

レポジトリにアクセスして`Actions`タブのポップアップの`Set up Actions`をクリックする

![スクリーンショット 2019-09-02 14.18.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/babe554d-6d9b-9afb-4fb2-015eddc74715.png)

画面右上の`Set up a workflow yourself`をクリックする

![スクリーンショット 2019-09-02 14.19.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/86cc9d95-a053-4830-f892-23a8dd2dc213.png)

エディタに記載されているyamlを以下のように更新する。内容をざっと解説すると`master`がpushされた時、レポジトリをチェックアウトしてnode.js v10.xをインストールし、依存モジュールをインストールしてから`npm test`でJestを実行している

```main.yml
name: CI

on:
  push:
    branches:
      - master

jobs:
  build:

    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v1
      - name: Setup NodeJs
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'
      - name: Install Dependencies
        run: npm install
      - name: Run test
        run: npm test
```

![スクリーンショット 2019-09-02 14.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/c17fab67-c320-d008-4468-3babd5b9aae7.png)

エディタの右上にある`Start commit`をクリックしてポップアップ中の`Commit new file`をクリックする

![スクリーンショット 2019-09-02 14.19.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/930c43e7-7397-1fb2-70e5-6c5b7a881000.png)

`.github/workflows/main.yml`がコミットされる

![スクリーンショット 2019-09-02 14.19.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/e9029b9f-46aa-6a36-166d-f9e84edf6e11.png)

ここまでできたらローカルの作業にもどる

## ローカルでpushする

とりあえず`git pull`してリモートの更新を取り込んでおく

```shell
git pull origin master
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 5 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (5/5), done.
From https://github.com/bathtimefish/github-actions-test
 * branch            master     -> FETCH_HEAD
   0bc764c..7759ff7  master     -> origin/master
Updating 0bc764c..7759ff7
Fast-forward
 .github/workflows/main.yml | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 .github/workflows/main.yml
 ```

その後、適当にレポジトリを更新する。今回は`Readme.md`を追加した

```shell
echo "# github-actions-test" > Readme.md
git add.
git commit -am"add readme"
```

レポジトリをリモートに`push`する

```shell
git push origin master
```

## Actionsを確認する

GitHubの`Actions`タブに戻ってみると、以下のようにworkflowの状況が表示されている。先程のpush`27c0a5f`でなにやら実行中のようだ

![スクリーンショット 2019-09-02 14.22.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/dd027e60-00a5-c4ef-08e5-78f598563ca2.png)

しばらくすると`27c0a5f`が緑のチェックに変わった。正常終了したらしい

![スクリーンショット 2019-09-02 14.23.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/1796db57-66c3-2fe8-79c7-775a89e159b7.png)

`27c0a5f`の`master`の表記をクリックすると詳細が表示される。アクションはすべて正常に終了したようだ

![スクリーンショット 2019-09-02 14.23.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/af6a798a-fa1d-adb9-b5b8-2b6d40aa16b5.png)

`Run test`をクリックするとテストの状況が確認できる。Jestもうまく動作したみたいだ

![スクリーンショット 2019-09-02 14.23.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61995/aef5c7f9-eb98-21fc-2c12-f0484270df14.png)


# おわりに

公式ドキュメントは[こちら](https://help.github.com/en/categories/automating-your-workflow-with-github-actions)。Dockerベースで何でもアリ感がすごい。使いこなせるようになると便利だなあ。UIもわかりやすいし全部GitHubの中で完結するのは気持ちいい。

ちょっと長いworkflowを記述するとデバッグや検証環境がほしくなる。そのあたりはどうなっているんだろうか？あとで調べてみたいがとりあえず既存のCIDIをGitHub Actions少しづつ移行していってみようと思う