ロゴテキスト ロゴ

    GitHub Actionsでjestのテストを実行する

    GitHub Actionsでjestのテストを実行する

    GitHub Actionsでjestのテストを実行出来るようにします。

    検証した環境

    1 yarn 1.22.4
    2 jest 26.4.2
    3 ts-jest 26.3.0

    下準備

    まずjestを実行出来る環境を作っておきます。 ここでは以下のサイトを参考にTypeScriptに対応させます。

    Jest - TypeScript Deep Dive 日本語版



    jestのパッケージを追加

    $ yarn add -D jest @types/jest ts-jest


    「jest.config.js」を追加し project_root/ > __tests__/ > テストファイル が実行出来るようにします

    jest.config.js
    module.exports = {
      verbose: true,
      testMatch: ['**/__tests__/**/*.+(ts|js)', '**/?(*.)+(spec|test).+(ts|js)'],
      transform: {
        '^.+\\.(ts|tsx)$': 'ts-jest',
      },
    }


    テストを実行するための参考用のテストファイルを設置します

    __test__/sample.test.ts
    test('sample test', () => {
      const nums = [1, 2, 3]
      expect(nums[1]).toBe(2)
    })


    2つのファイル追加後はこのようになります

    project_root/
      __test__/
        sample.test.ts
      jest.config.js


    npm-scripts にテスト用のコマンドを設定し実行してみます。

    package.json
    {
      "scripts": {
        "test": "jest",
        ・・・
      },
    }

    $ yarn run test
    ・・・
    PASS  __tests__/sample.test.ts
      sample test (2 ms)
     
    Test Suites: 1 passed, 1 total
    Tests:       1 passed, 1 total
    Snapshots:   0 total
    Time:        4.603 s
    Ran all test suites.
      Done in 9.12s.

    jestのテストが実行出来るようになりました!

    GitHub Actionsの設定

    まずテスト用のファイルを追加します。

    GitHub Actionsのテストは.github/workflows/ディレクトリに*.ymlで配置すればよいので、

    .github/
      workflows/
        test.yml

    ↑のような形でtest.ymlを追加します。



    結果から先に書いてしまうと、私のコードは最終的に以下のようになりました。

    .github/workflows/test.yml
    name: Sample Test
     
    on: push
     
    jobs:
      test:
        runs-on: ubuntu-latest
     
        steps:
        - uses: actions/checkout@v2
        - name: Use Node.js v14.13.1
          uses: actions/setup-node@v1
          with:
            node-version: '14.13.1'
        - run: yarn install
        - run: yarn run test

    nodeのバージョンを v14.13.1 にしている理由は私のプロジェクトがnodenvを使ってv14.13.1に固定しているため。


    実行結果がこちら

    最終的な実行結果




    ここから順にやったことを書いていきます

    nodeやyarnを使えるようにする

    jestを実行したいので node と yarn が実行出来るか見てみます

    .github/workflows/test.yml
    name: Sample Test
     
    on: push
     
    jobs:
      build:
        runs-on: ubuntu-latest
     
        steps:
        - run: node -v
        - run: yarn -v

    これでpushすると、


    結果は

    GitHub Actionsでnode・yarnの確認

    !!

    デフォルトで node も yarn も実行出来るんですね!


    nodeも2020/11/02現在最新のLTSにほぼほぼ近いバージョンで素晴らしい✨



    CircleCIのようにnodeのイメージを使ったり何かひと手間加える必要があるかと思っていたのですが、デフォルトで使えるんですね〜

    jestのテストを実行する

    jestのテストをGitHub Actions上で実行します

    .github/workflows/test.yml
    name: Sample Test
     
    on: push
     
    jobs:
      test:
        runs-on: ubuntu-latest
     
        steps:
        - run: node -v
        - run: yarn -v
        - uses: actions/checkout@v2
        - run: yarn install
        - run: yarn run test

    この状態でpushすると

    GitHub Actionsでjestのテストを実行する

    テストが実行されました!



    actions/checkout@v2 を使うことでGitHub Actionsの実行環境に該当ソースコードを持ってきます。

    CircleCIの checkout と役割一緒ですね。


    その後に yarn install で必要なライブラリ(それこそjestも)をインストール、 yarn run test でテストを実行、という流れです。

    nodeのバージョンを指定する

    nodeのバージョンを指定するのは actions/setup-node@v1 を用います

    1つのバージョンで実行

    with.node-version でnodeのバージョンを指定。

    LTSになったばかりの最新のv14も使用出来ます


    actions/setup-node@v1 実行前/実行後にnode -v を実行し、 nodeのバージョンが切り替わったかを見てみます

    .github/workflows/test.yml
    name: Sample Test
     
    on: push
     
    jobs:
      test:
        runs-on: ubuntu-latest
     
        steps:
        - run: node -v
        - uses: actions/checkout@v2
        - name: Use Node.js
          uses: actions/setup-node@v1
          with:
            node-version: '14.x'
        - run: node -v
        - run: yarn install
        - run: yarn run test
    GitHub Actionsでnodeのバージョンを指定

    2回目の node -v はしっかり v14.14.0 になってますね!



    14.x のように x を使った場合そのバージョンの最新のものを利用してくれます

    この’x’はワイルドカードキャラクターで、そのバージョンで利用できる最新のマイナー及びパッチリリースにマッチします。

    Node.js のビルドとテスト - GitHub Docsより引用

    複数のバージョンのnodeを試す

    strategy.matrix.node-version で複数のバージョンを指定することが出来ます。

    matrixについて GitHub Actions公式 ではマトリクス戦略として紹介されてますね。

    jobs.<job_id>.strategy.matrix
    様々なジョブの設定のマトリックスを定義できます。 マトリックスによって、単一のジョブの定義内の変数の置き換えを行い、複数のジョブを作成できるようになります。 たとえば、マトリックスを使って複数のサポートされているバージョンのプログラミング言語、オペレーティングシステム、ツールに対するジョブを作成できます。 マトリックスは、ジョブの設定を再利用し、設定した各マトリクスに対してジョブを作成します。

    GitHub Actionsのワークフロー構文 - GitHub Docsより引用

    matrixについてはGitHub Actions公式に詳しく書かれてて、OSを切り替える方法も書かれてます

    https://docs.github.com/ja/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions#jobsjob_idstrategy

    .github/workflows/test.yml
    name: Sample Test
     
    on: push
     
    jobs:
      test:
        runs-on: ubuntu-latest
     
        strategy:
          matrix:
            node-version: [ 10.x, 12.x, 14.x ]
     
        steps:
        - run: node -v
        - uses: actions/checkout@v2
        - name: Use Node.js ${{ matrix.node-version }}
          uses: actions/setup-node@v1
          with:
            node-version: ${{ matrix.node-version }}
        - run: node -v
        - run: yarn install
        - run: yarn run test
     
    GitHub Actionsで複数nodeのバージョンを指定

    私が今まで関わってきたプロジェクトだとnodenv等でnodeのバージョンを固定して開発してきたのであまり複数nodeのバージョンを利用する、というシーンが思い浮かばないのですが、

    例えば、システムの切り替えで v10.x → 14.x、という時に [10.x, 14.x] とすることでどちらでも同じテストを通して試す、といったことが可能そうですね。

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。