PreviewモードとTESTモードのどちらを信用すればいいのか

聞きたいこと

PreviewモードとTEST(あるいはRUN)で、UIの表示(レイアウト、フォントなど)が異なることが多い。

これはどちらの表示を信用すればいいのか?あるいは表示を統一する方法があれば知りたい。

詳細

Previewモードは実装しているときのUIをそのまま反映しているが、TESTモードだとフォント(太さ、LetterSpacing)やレイアウト(特に要素同士の縦方向のAlignment)が実装と異なることが多い。

↓は1枚目が実装時、2枚目がPreview、3枚目がTESTのスクショである。
1、2枚目はほぼ同じ表示であるが、3枚目だけフォントのLetterSpacing(赤枠)、フォントの太さ(青枠)、要素の縦方向のAlignment(紫線)が異なっている。

■実装時

■Preview

■TEST

信用度は、高い順に
RUN > Test >Previewです

それぞれ、以下のように分け方になると思います。

  1. Preview App: プロトタイピングに適しており、UIコンポーネントの動きを確認できるが、データベースのデータは扱えない。

  2. Test Mode: デバッグに特化しており、バグの修正後に即座にリロードを行い変更を確認することが可能。このモードではデータベースのデータも扱える。

  3. Run Mode: 実際の動作確認を行うためのモード。このモードのリンクを共有してブラウザ上で動作確認ができるが、即座のリロードは行えない。

ただ、信用度が高いほど、アプリ表示も時間がかかるので、この辺は場合に応じてという感じです。

基本は、データベースに大きいデータが入っていない限りは、全て同じになっているはずですが、
先週くらいから、テストモードの反映が遅い or してない などのトラブルもNoCodeCamp内で共有されているので、本来は、Test を信じるべきですが、今のタイミングだと、UIくらいなら、Previewだけ見てやってもいいのではないかなと思います。

【参考】 アプリをテストする