React Native ExpoとJestとVS Codeの組み合わせでテストをデバッグ 全体/ファイル単位

React Native ExpoとJestとVS Codeの組み合わせでテストをデバッグするときのlaunch.jsonの設定です。

テストがうまくいかないときにテストをデバッグしたい時があります。

そんな時全体のテストのデバッグと、一つのファイルのみをデバッグするときのlaunch.jsonの設定です。

Windows 10 Home
React Native Expo SDK 39
Expo CLI 3.28.2
Jest 26.6

Jestの公式リファレンスはこちらから

jestjs.io

launch.jsonファイルがまだない場合は、VS Code左側の［デバッグ］ビューから作成してください。

公式リファレンスに従い、launch.jsonを下記内容にすれば[Debug Tests]でテスト全体の実行とデバッグができるようになります。
WindowsやExpo以外の場合は内容が変わるので、上記公式リファレンスを見てください。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

また、内容付け加えて下記のようにすれば[Debug Current Test File]で現在開いているテストファイルのみを実行してデバッグできます。

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    },
    {
      "name": "Debug Current Test File",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand"
      ],
      "args": [
        "${fileBasename}"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

${fileBasename}はVS Codeにより現在開いているファイル名に置き換えられます。
詳しくは下記公式ページを見てください。

Visual Studio Code Variables Reference

React Native Expoで作ったAndroidアプリのリリースで権限のエラーが出たので権限を設定した

Google Play ConsoleでAndroidアプリを公開しようとしたら、権限に関するエラーが出てしまいました。

React Native
emulator Android API 27
expo 38
expo-cli 3.28

出たエラーは下記のようなもの

プライバシー ポリシーが必要な権限（android.permission.CAMERA）が APK または Android App Bundle で使用されています。

プライバシー ポリシーを設定していなかったのですが、それ以前にアプリでカメラを使いません。

原因は必要な権限を自分で設定しなかったので、デフォルトで設定された権限になっていたためでした。
app.jsonに設定を追加してエラーを回避できました。

Expoの公式ドキュメントはこちらのリンクから↓
app.json / app.config.js - Expo Documentation

app.jsonのandroidの項目に以下のように設定しました。

    "android": {
      "package": "xxxxx(your package name)",
      "permissions": []
    },

"permissions": []は特別な権限は要求しない設定です。

アプリやっとできた

ようやくアプリ完成。

初めてで休み休みとはいえ、2か月くらいかかってしまいました。

しかしここで衝撃の事実発覚！

Android開発者登録には25ドルかかるとか。
でも自分だけで使うってのもなあ。

無料アプリで探したから欲しいのがなかっただけで、普通に有料アプリ探せばあったんじゃ・・・

そしてさらにAppleStoreには年間1万円が必要、iPhone使ってないし、こっちはまあいいか。

React Native ExpoでAndroid Studioのエミュレーターがエラーも吐かずにStopするとき

React Native ExpoでAndroid Studioのエミュレーターがエラーも吐かずにStopするようになってしまいました。

Windows 10 Home 64bit
emulator Android API 27
expo 39.02
expo-cli 3.27

ある日突然、何の設定も変えていないのに…
なにかアップデートされたんでしょうね。
パソコン初心者の方が「何もしてないのにこわれた」という時の気持ちがわかった気がします。

いろいろ再インストールからリカバリーまでするも完全には直らず、エミュレーターでデバッガーを有効にするとStopする状態に。
最終的にSDKのバージョンを下げることで解決しました。

まずはSDKのバージョンが原因か知るために、下記コマンドで適当に下げたバージョンのプロジェクトを作りました。

expo init --template blank@sdk-38

この記事を書いた時点で最新バージョンは39、一つ下げた38でうまくいきました。

エミュレーターを起動し、うまくいくか確認します。

あとは問題のプロジェクトのnode_modulesフォルダを削除して、npm installコマンドでなんとかなります。

package.json内のライブラリのバージョンはうまい調整方法があるのでしょうが、調べる気力が残っていませんでした。
新しく作ったプロジェクトからpackage.jsonをコピーして、

npm install xxxxx xxxxx xxxxx

（xxxxx=ライブラリ名） で残りのライブラリをまとめてインストールしました。

（2020/11追記） その後expo-cliの最新版が公開されたのでアップデートしたところ、SDKが最新でもうまくいくようになりました。

React Nativeをはじめるときに参考にしたサイト

スマホアプリを作ってみようと思い立ち、React Nativeを学んでみることにしました。

いろいろなサイトを見てみましたが、結論から言うと、公式サイトが一番で、十分です。

reactnative.dev

はじめは検索で出てくるQiitaとか参考にして開発環境を整えようと思ったのですが、これが間違いでした。

Qiitaのページの通りにやっても全然うまくいきません。 情報が古いのか、その通りにやるとエラーだらけ。
Goodみたいなのいっぱいついてたのに。

正直ちょっとあきらめかけました。

よく見たら公式サイトにイントールガイドもあったので、そちらを参考にすることに。
公式サイトの通りにすると、驚くほどスムーズにいきました。

↓こちらが公式サイトの環境構築ページへのリンクです。

reactnative.dev

初心者ということで、Expoを使うことにしました。

Expoでのデバッグ

Expoでのデバッグは以下のリンクから。
Chromeの開発者ツールを使います。

docs.expo.io

手順としては、まずはデバイスでアプリを起動しておきます。

次にデバイスで開発者メニューを開きます。
デバイスの種類によって方法が違います。
たとえばAndroidエミュレーターの場合はエミュレーター上でCmd(Ctrl) + mを押すか、ターミナルでadb shell input keyevent 82を実行します。

するとChromeでページが開くので、そのページでChrome開発者ツールを開けばデバッグできます。

開発者ツールのSourcesタブのdebbugerWorker.***.jsの長～いリストの中に自分で書いたスクリプトもあるので、そこでブレークポイントを設定したりできます。

Expoでテストを書く

React NativeはJestに対応していますが、Expoで開発を始めた場合自分で追加する必要があります。

まずはJestを追加。

Getting Started · Jest

そしてExpoのサイトに従ってJest-expoも追加します。

Testing with Jest - Expo Documentation

これでOK！と思ったら、何やらエラーが。

検索して下記を試してみたらうまくいきました。
公式サイトに従えば何も考えなくていいと思ったのですが、油断できませんね。

npm install jest@latest --save-dev

Expoで開発する注意点

Expoで開発する場合、NativeCodeを用いるモジュールは使えません。

インストール時に react-native link が必須のモジュールがそれです。

代わりにExpoには標準で大概の機能のモジュールが用意されています。
↓公式ページに一覧があります。

docs.expo.io

チャドクガに刺された痒みをアイロンで治す

そろそろチャドクガの季節なので、去年チャドクガに刺されたときに2日で治したやり方を書いておきます。

３日目くらいに試して、次の日のうちに大体治りました。

ただしかなり危険な方法なので、もしやりたい方は自己責任でお願いします。

チャドクガに刺されるとどうなるか

チャドクガに刺されると広い範囲に湿疹ができたようになり、とにかくものすごく痒いです。

毒針毛とよばれる0.1mm程の毛が原因で、掻くと掻いた手の方に移ってさらに範囲を広げていきます。

私は最初チャドクガと気づかずにいて、掻きまくった結果全身に広げてしまいました。

痒さは１~２週間続くとされています。

ネットの対処法

以下はネットでざっと調べた対処法です。

応急措置として有効です。

• ガムテープで毒針毛を取り除く：　患部を中心にガムテープ（粘着テープなら何でも）でペタペタやります。
• 流水で洗う：　水で毒針毛を洗い流します。
• 軟膏を塗る：　かゆみ止めの軟膏を塗ります。しかし市販の薬ではあまり効果ないようです。
• スプーンをお湯で熱してあてる：　スプーンを50℃以上のお湯で温め患部に充てると、痒みが引き、毒も無毒化できます。ただ温度管理が大変なうえに、ちまちまと面倒です。

すぐ治した時の方法

毒針毛は一度付くと、なかなか完全にはとり切れません。その間ずっと痒みを与えてきます。

そこでチャドクガの毒の性質を利用します。

どうやら50℃以上になると毒の大部分は無毒化されるようです。

すばり、アイロンを肌にあてます！

頭おかしいと思った方は、読むのはここでやめて他の対処法を探してみてください。

注意点

当然ですが、やけどの可能性があります。

人間の皮膚は50℃なら3分ほどは耐えてくれるそうです。

しかし55℃なら30秒、60℃なら5秒でやけどです。

そしてアイロンは10℃くらい1～2秒で上げてきます。

やけどを防ぐためには、正確な温度管理が必要です。

用意するもの

用意するものは非接触型の温度計と、アイロンです。

温度計は以下の画像のような非接触型のものを用意してください。
アマゾンとかで売っています。

これでアイロンの底面の温度をチェックします。

手順

1. アイロンを50℃～55℃くらいに調整します。
   電源が切れるか切れないかくらいの低温が、そのくらいかと思います。
   もしアイロンがその温度に調整不可なら、一度高い温度にして、電源を切り50℃強まで冷えるのを待ちます。
2. 必ず温度計で温度をチェックしてください。
3. 患部にアイロンを数秒間当てます。やけどしないよう時間を調整してください。

以上で終わりです。

熱の効果で痒みは即座にひくと思います。

そのあとやや痒みがぶり返します。どうもチャドクガの毒は複数の成分で成り立っているらしく、50℃程度では分解されないヒスタミンも含まれるそうです。

しかし毒針毛の毒の大半は無毒化されているので、そのまま快方に向かうはずです。

我慢が出来ないときはかゆみ止め軟膏を塗るか、もう一度アイロンをします。

念のためにすること

毒針毛は触れた場所ありとあらゆるものに移っています。

そこら辺を無毒化しておかないと、毒針毛が移りなおしてきて、症状がぶり返すはずです。

• 寝具や椅子
• 着ていた服

などに重点的にアイロンを当てていきましょう。

やけどの心配がないので、温度は素材に合わせてがっつり上げます。

改めて注意

やる場合はやけどに注意してください。

私は一切責任を取りません。

正式な対処法

正式にちゃんと対処したいなら、医者に行くことをお勧めします。

しかし、どんな医者でもチャドクガの被害を2～3日では治せないと思います。

Noxが99%で止まるトラブルへの対処

Noxはandroidのエミュレーターの一つです。

Noxを起動中にwindowsが強制終了されたときに、Noxの起動が99％で止まるようになってしまったので、その対処をしました。

公式の対処方法

まず最初にチェックしたのは、Nox公式サイトの対処方法です。

99%で止まった時に終了させようとすると、エミュレーター終了の確認画面が出ます。
そこに99%で止まった時の対処法へのリンクが載っているので、そこから見れます。

よくある症状なんでしょうね。

ただ、なんというか最初から起動できない人向けの対処法という感じでした。
いままで正常に使えていたので、やっても多分直らない雰囲気です。

そこに載っている方法で対処できない場合も、「Nox 99%」で検索すればいろいろ解説しているサイトがあるので、それを見ながら対処法を探していくのも一つの手です。

エミュレーターを作り直して対処 

 でも今回は面倒だったので、手っ取り早くエミューレーターの作り直しで対処しました。

バックアップを取っているなら、一番早いかと。

Noxマルチインスタンスマネージャーを起動する

Noxには複数のandroidのエミューレーターを管理する機能があるので、それを使います。

インストール時にデスクトップに作成されたショートカット｢Multi-Drive｣をダブルクリックするか、「MultiPlayerManager.exe」を探してダブルクリックします。

エミュレーターを追加する

Noxマルチインスタンスマネージャーを起動したら、右下の「エミューレーターの追加」をクリックします。

追加されたエミュレーターの起動ボタン（上の画像の赤丸）をクリックしてみて、起動できれば今後はそちらのエミュレーターを使うようにすればいいでしょう。

起動できない場合はパソコン本体かnox自体に問題があります。公式サイトの対処法が参考になるはずです。

バックアップとリストア

動作が正常な頃にバックアップを取っていれば、簡単に復元が可能です。

まず起動した画面の右上の設定ボタンからシステム設定を開きます。

「データ関連」のタブで「バックアップ」をクリックすればファイルにバックアップが可能です。

同じ画面の「導入」で復元できます。