シリーズの最後の部分！今回は、ページをモバイル対応にするとともに、Enzyme＆Jestを使用してReactフロントエンドでテストを実施します。

パート3を逃しましたか？先に進む前に、必ずそれを読んでください。

レスポンシブウェブデザイン

すべてのデバイスは異なる方法で作成されました。2021年4月の時点で、最も使用されているコンピューターディスプレイは1920x1080です。昨年、パンデミック時のトラフィックシェアは、通常、ディスプレイのサイズと解像度が小さいモバイルデバイスに費やされました。つい最近、デュアルスクリーン機能を備えたスマートフォンも市場に参入しました。使用するデバイスと、それがユーザーによるWebサイトの表示方法にどのように影響する可能性があるかについて注意する必要があります。幸いなことに、TailwindCSSにはそのためのユーティリティがあります。

ディスプレイサイズに基づいてブレークポイントを設定し、すべてのデバイスに対応できます。まず、特定の画面サイズを追加するようにtailwind.config.jsファイルを設定する必要があります。現在、私はそれを次のように設定しています：

Pixel2の640ピクセル幅から1920ピクセル幅のディスプレイモニターまでの範囲の解像度を含めました。これらのブレークポイントを使用して、モバイルでのフロントエンドの外観を制御できます。

現在、情報セクションでグリッドを使用しています。現在、小型デバイスでの外観を制御していません。これを変更しないと、グリッドボックスは互いに重なり合い、次のようになります。

各ブレークポイントでグリッドをどのように表示するかを指定することで、その外観を変更できます。これは私たちのコードがどのように見えるかです：

より大きなビューポートでは、grid-cols-3を使用した水平グリッドビューが表示されます。小さいディスプレイでは、grid-cols-1を使用して垂直グリッドビューに切り替えます。

ジェストテストによる酵素

フロントエンドをテストするためにEnzymeとJestを使用します。次の行を使用して、酵素の依存関係をインストールします（まだインストールしていない場合）。

npm i --save-dev enzyme enzyme-adapter-react-16

次に、setupTests.jsファイルのEnzymeライブラリからアダプターをセットアップします。

App.test.jsファイルにテストが含まれます。テストライブラリをReactとEnzymeからインポートし、続いてテストに使用するコンポーネントをインポートします。AppとNavから始めて、コンポーネントのレンダリングをテストしてみましょう。

アプリとナビゲーションコンポーネントがレンダリングされるかどうかを確認しています。以下を使用してテストを実行します。

npm run test

Navコンポーネントのレンダリングをテストして、Navバーリンクもレンダリングすることを期待してみましょう。また、Heroコンポーネントをテストして、画像srcが含まれてレンダリングされるかどうかを確認します。

正しく行われた場合、テストはすべて合格するはずです！

テストが必要な次のいくつかのコンポーネントについても同じことができるため、最終的なコードは次のようになります。

さらにテストを追加したい場合は、間違いなく実行可能です。これには主にコンポーネントレンダリングテストが含まれているため、取り組むのはかなり簡単です。コンポーネントロジックのテストに入ると、テストはより複雑になります。

これで、React.jsアプリの作成とTailwindCSSでのスタイリングに関する私のシリーズは終わりです。以下にいくつかのリソースリンクと、デモを含むリポジトリへのリンクを含めます。

プロジェクトリンク

• Gitリポジトリ

• LinkedIn
• GitHub
• ツイッター
• インスタグラム
• YouTube

リソース

• TailwindCSSドキュメント
• 酵素のドキュメント
• Jestドキュメント
• React.jsドキュメント