MacBookでReactNativeの開発環境を整える

環境

MacBook air m1チップ
macOS Monterey 12.0.1

nodejsのインストールの前に

nvsをインストール。
nodeのバージョンを管理してくれるやつ。
下記からmac用のインストールコマンドをコピペ。

Macの場合PATHを通す必要がある

Macの場合、nvsやnodejsをインストールしたあと、ターミナルを削除してまた起動したあと、
nvs --versionのようにnvsコマンドが使えなくなる。
これはPATHが通ってないために起こる。
そこで、自分のアカウントの直下に.zshrcというファイルがあるので、そこに下記を追加しておく。

export NVS_HOME="$HOME/.nvs"
[ -s "$NVS_HOME/nvs.sh" ] && . "$NVS_HOME/nvs.sh"
nvs use 16.13.0

Jestを導入する

npm install --save-dev jest

pacage.jsonのscriptに下記を追加する。

"test": "jest"

テストしたいときは、

npm test

でテストが走る。

参考にした記事。

Enzymeを導入する。

EnzymeはReactコンポーネントをレンダリングするためのライブラリ。

実際にテストしてみる

関数のテスト

sum.jsファイルを作成する。

function sum(a, b) {
  return a + b;
}
module.exports = sum;

sum.test.jsファイルを作成する。

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

npm test

を実行すると、テスト結果が表示される。

スナップショットテスト

UIのテスト。予期しないUIの変更をテストすることができる。

算術関数や書式変換関数のテストなどはイメージつくけど、スナップショットのテストの重要さはいまだによくわかっていない。