Snapshotの結果がローカルとCircleCIで違っていた

Reactアプリ開発では Snapshot テストをよく使うんですが、あるとき ローカルとCircleCI上で作成したのSnapshotの結果が異なり、テストが落ちるという現象が発生しました。

これは少し調べたところ、Nodeのバージョン違いによってJest実行結果が異なっていたためでした。

当時のローカル(Mac)マシンの Node のバージョンは、

$ node -v
v12.8.0

ですが、CircleCIのNodeは、

version: 2
jobs:
  test:
    docker:
      - image: circleci/node:10.5.0

でした。

というわけで以下の手順で node をダウングレード。

$ brew unlink node
$ brew link node@10
$ brew link --force --overwrite node@10
$ node -v
v10.16.3

厳密にはまだバージョンが異なってましたが、Snapshotの結果はこれで一致。

webpackプロジェクトのCircleCI上のビルドに失敗する

webpackを使っているSPAプロジェクトを、CircleCIでビルドしようとしたら以下のエラーが出て失敗した。

npm run build

> my_project@1.0.0 build:staging /home/circleci/repo
> webpack --config ./webpack.config.js

Starting type checking service...
Using 1 worker with 2048MB memory limit
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at Pipe.onread (net.js:656:25)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! casting_asia_advertiser_frontend@1.0.0 build:staging: `webpack --config ./webpack.config.staging.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the casting_asia_advertiser_frontend@1.0.0 build:staging script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/circleci/.npm/_logs/2019-08-07T08_22_22_942Z-debug.log
Exited with code 1

結論から言うと、ビルドに thread-loader を使っていたことが原因だった。

この Issue によると、

Perhaps this value should get set when CI:true to something lower, or expose an environment variable that would allow overriding that value.

ということなので、CI上のときはworkerの数を減らしてみる。

CI上かどうかは、CircleCIの場合は CI=true という環境変数で判別できる。

// 省略

// CIかどうかを環境変数から判別
const CI = process.env.CI;

module.exports = {
  // 省略
  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: [
          // 省略
          {
            loader: 'thread-loader',
            options: {
              // CI上なら workerの数を減らす。そうでないならデフォルトの値で。
              workers: CI ? 4: undefined
            },
          },
          // 省略
       }
    ]
  },
};

ビルドできました。

退職しました & タイ・バンコクの会社に転職します

実は9月某日で、新卒で入社した会社を退職していました。 充電期間を終え、11月からタイのバンコクに移住し、エンジニアをやっていくことになりました。 分析コンサル会社から、広告系中心の事業会社です。わかる人には会社名わかりそうですね。 担当領域は、データサイエンスやフロントエンドに限らず、いろいろとやる予定です。サーバーサイドとかも。

いつか海外で働きたいとはボンヤリ思っていたのですが、まさかこんなに早く実現するとは思いませんでした。 はじめての海外生活なので正直ビビってるのですが、 日本人も多いバンコクなので、生活面はなんとかなるんじゃないかと高をくくっています。

問題は語学面で、エンジニアリング部署は英語で会話するそうです。 英語力が駄目駄目なので、働きながら語学力を身につけなければなりません。 とはいえ、私の英語力でいきなりアメリカとかの英語圏だったら厳しかったですが、 バンコクに集まるエンジニア内での会話なのでまだなんとかなるかもしれません。最初は痛い目にあうでしょうけど。。

英語力ゴミ状態の私を採用していただいた転職先に感謝します。 タイ語も勉強していきたいですね。

移住後は、現地コミュニティに参加したり、GAOGAO を見学したりしたいです。 タイでのR言語の浸透ぐあいはよくわからなかったので、ひっそりとR言語やShinyを布教したいですね。

転職についての詳しい経緯とかはTwitterやブログでちょいちょい書くかもしれないですし、書かないかもしれません。 ホームシックになる可能性もあるので、ときどき日本に帰ってきた際は絡んでいただければ泣いて喜びます。

約束しているお仕事で関わっている方々には、もろもろ遅れておりご迷惑をおかけしております。 充電終わったのでなんとか取り戻します。

今後とも宜しくお願いいたします。

↓アサマシくも例のリスト
http://amzn.asia/h71JfQF