これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） 現環境でのサスペンスの使用 FacebookではRelay のサスペンス連携機能のみすでに利用しているらしい。 Relay を使ってない場合はも…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） そもそもサスペンスとは何なのか？ 昨日も触れたようにサスペンスはレンダー可能になる前にコンポーネントが何かを待機できるように…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org サスペンスを使ったデータ取得（実験的機能） React 16.6 で追加されたコードのロードを待機してロード中状態を指定できるSuspenseコンポーネントが追加された。 const ProfilePa…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 研究からプロダクトへ 並列モードは以下を目標に掲げているらしい。 目標は、人間・コンピュータ間の相互作用に関する研究から得られた知見を現実の UI に取り込むことです。 Re…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 並列性 これまでの2つの例から統合の仕方を見ていく。 並列モードではReactは複数の状態の更新を同時に行うことができる。 CPUバウンドな更新の…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 計画的なローディングシーケンス ブランチの作業は短期的なものもそうだけど、時間をかけて十分になるまで維持することもある。 それと同様に並…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 中断可能なレンダリング フィルタ出来るリストがあった場合、リストのフィルタにタイピングをしようとすると、 都度検索が走って引っ掛かりのよ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） ブロッキングレンダリングと中断可能レンダリング Git以前のバージョン管理はほかの人が作業をしていると触ることすらできなかった。 ブランチ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org] 並列モードの導入（実験的機能） 並列モードとは？ Reactアプリをレスポンシブに保ち、デバイスの能力やネットワークの速度にうまく適応できるようにするための新機能群。 実験…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org 並列モードの導入（実験的機能） まだ安定リリースされてない機能らしい。 ビギナーはお呼びじゃない機能なのであまりやらなくてもよいとか。 セクションとしてはこんな構成らし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 End-to-end テスト E2Eテストは長いワークフローをテストするのに向いており、 本物のブラウザを使い、実運用に即したテストを行う。 Cypress のようなフレームワーク…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 タイマーのモック コンポーネントがsetTimeout、setInterval や Date.now といった時間に依存する関数を使っていた場合 関数部分をモックで置き換えて手動で操作をで…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 モジュールのモック テストに関係ない場所に依存しているコンポーネントをテストしたい場合、 その部分だけをモック化して適切な代替物で置き換えることができるので…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 関数のモック テストを書く際はテスト環境に同等物がないコードのモック化をしたい場面がある。 関数の監視をしてテストの部位が関数同士でどのように作用するか観察…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 描画画面のモック jsdomを使って描画のテストをするとよい。 ブラウザとほぼ同様の動きをするが、レイアウトやナビゲーションがないのは注意。 ユーザ操作のモデルを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト環境 Jest、mocha、avaといったテストランナーをつかうとJavaScriptでテストスイートを書き、実行できるようになる。 テストスイートは継続的インテグレーションの一部とし…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 複数のレンダラ レアケースだが、複数のレンダラを使うコンポーネントへテストをしないといけない場合がある。 react-test-rendererを使っているがその子のコン…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 スナップショットテスト JestのようなフレームワークではtoMatchSnapshot / toMatchInlineSnapshotを使う。 これでスナップショットを保存できる。 一般的には…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 タイマー タイマー用のモックもある 例えばこんな感じ // card.test.js import React from "react"; import { render, unmountComponentAtNode } from "react-d…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 イベント DOMの要素に対して本物のDOMイベントをディスパッチ。 結果に対してアサーションを行うようにした方が良い。 React ではイベントは自動的に document …

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 モジュールのモック化 テスト環境ではうまく機能しないもの、本質的にテストとは違うもの、色々なモジュールがある。 これらをダミーに差し替えることでテスト…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 データの取得 本当のAPIを呼ぶ代わりにリクエストをモック化してダミーデータを返すようにできる。 フェイクデータを用意することでバックエンドが利用できない…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 レンダー 与えられたpropsに対してコンポーネントが正しくレンダーされているかをテストしたい場合、propsに合わせてメッセージレンダーをするコンポーネントを…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 act() UIテストを記述するときのレンダーなどはインタラクションのユニットと考えられる。 Reactのact()はアサーション前にユニットに関する更新が実行され、DO…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 セットアップ/後始末 通常Reactツリーをdocumentに結び付いたDOM要素として描画する。 テスト終了後にクリーンアップを行いdocumentからツリーをアンマウントす…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テストのレシピ集 React コンポーネントのための一般的なテストのパターン集。 きのうみたJestで利用することを前提としたレシピ集。 ラインアップは以下のようになっている。 ・…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 推奨ツール Jestを使う。 jsdomを通じてDOMにアクセスできるJavaScriptテストランナーになる。 jsdomはブラウザ模倣環境だが、基本的にはこれで困らない。 最終的なテ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 トレードオフ テストツールの選定にはトレードオフの考慮が発生する。 実行速度vs環境の現実度：フィードバックの早いツールはブラウザでの挙動を正確に再現しない 実…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org テスト概要 JavaScript同様にテストが可能。 大きく二つに分けることができる。 コンポーネントツリーのレンダリングをシンプルなテスト環境で行いその結果を検証する。 アプリケ…

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useDebugValue React DevToolsでカスタムフックのラベルを表示することができる。 useFriendStatysを使った例 function useFriendStatus(friendID) { co…