2020-07-01から1ヶ月間の記事一覧

Reactガイドを読んでいくその295

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

Reactガイドを読んでいくその294

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

Reactガイドを読んでいくその293

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

Reactガイドを読んでいくその292

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

Reactガイドを読んでいくその291

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

Reactガイドを読んでいくその290

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

Reactガイドを読んでいくその289

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

Reactガイドを読んでいくその288

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

Reactガイドを読んでいくその287

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

Reactガイドを読んでいくその286

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

Reactガイドを読んでいくその285

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

Reactガイドを読んでいくその284

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

Reactガイドを読んでいくその283

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

Reactガイドを読んでいくその282

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

Reactガイドを読んでいくその281

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

Reactガイドを読んでいくその280

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

Reactガイドを読んでいくその279

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

Reactガイドを読んでいくその278

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

Reactガイドを読んでいくその277

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

Reactガイドを読んでいくその276

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

Reactガイドを読んでいくその275

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

Reactガイドを読んでいくその274

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useLayoutEffect useEffctと同様なもの。 DOMに変更があった後で同期的に副作用が呼ばれる。 DOMからレイアウトを読みだして同期的に再描画を行う場合に…

Reactガイドを読んでいくその273

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useImperativeHandle useImperativeHandle(ref, createHandle, [deps]) refが使われたときに親コンポーネントに渡されるインスタンス値をカスタマイズす…

ビデオSaaSのエンジニアリング最前線にオンライン参加してきた

これは2020/7/8(水)に行われたビデオSaaSのエンジニアリング最前線に参加したメモと感想です。 目次 目次 イベントページ 内容(※敬称略) セッション 1. 今から始めるWebRTC (株式会社Worky Co-founder 高松智明 (@t14i_)) セッション2. WebRTC ビジネスの失…

アドレナリンジャンキーを読んだ

www.amazon.co.jp ※Amazon 一気に読んだ。 本の内容は86パターンでパターンごとに切れているため非常に読みやすい。 大規模でも小規模でも組織として活動していくならばどこかしらフックするようになっている内容であった。 書かれているアンチパターンすべ…

Reactガイドを読んでいくその272

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useRef const refContainer = useRef(initialValue); useRefは.current プロパティが渡された引数に初期化されているミュータブルなrefオブジェクトを返…

Reactガイドを読んでいくその271

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useMemo ここまでに何度か登場しているuseMemo。 メモ化された値を返す。 メモ化とは大体キャッシュ化と似た機能であると理解した。 同じことするんだし…

Reactガイドを読んでいくその270

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useCallback メモ化されたコールバックを返す。 インラインのコールバックとそれが依存する値の配列を渡すことでuseCallbackはメモ化したものを返し、 …

Reactガイドを読んでいくその269

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス useReducer useStateの代用品。 これを使う場面としては複数の値にまたがる複雑なstateロジックがある場合や、前のstateに基づいて次のstateを決める必…

Reactガイドを読んでいくその268

これは Reactのガイドを読んでいく記事です。 ガイドのリンク ja.reactjs.org フック API リファレンス 追加のフック 特殊な用途のフックなので、あまり使う場面はなさそう。 ラインナップは以下になる。明日から細かくみていく。 useReducer useCallback us…