THUMBS SHIFT→

このブログは主に親指シフトを用いて書かれています

create-react-appを使ってるプロジェクトでGithub Actionsを使うときのポイント

create-react-appはnpm|yarn testしたときにデフォルトで--watch --onlyChangedオプションを付けちゃう。そのためGithub Actionsでテストすると、タスクが終了しないので、ハングアップしてテスト続行不可になる。

By default npm test runs the watcher with interactive CLI. However, you can force it to run tests once and finish the process by setting an environment variable called CI.

When creating a build of your application with npm run build linter warnings are not checked by default. Like npm test, you can force the build to perform a linter warning check by setting the environment variable CI. If any warnings are encountered then the build fails.

https://create-react-app.dev/docs/running-tests/#continuous-integration

そのため、環境変数にCI=trueを追加しなきゃいけない。ドキュメントでは「普通はCIはCIサービス側で設定されてるよ」って書いてあるけど、Github Actionsではまだっぽい。まだベータ版だからね。

name: CI

on: [push]

jobs:
  test:

    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
      - run: yarn install
      - run: yarn test
        env:
          CI: true

CIを設定すると、yarn buildでWARNが起きるとfailする。

環境変数の追加の仕方は他にもある。↓

help.github.com

ちなみに CI=true yarn testは勿論のこと、yarn test --watchAll=falseでもローカルで同じようなことが出来る。知らなかった。 f:id:arark:20191214084310p:plain こんな感じでテストが実行されます。おぉー。