React Hooksでテストをゴリゴリ書きたい - react-reduxやaxiosが使われているような場合もゴリゴリテストを書きたい
2023/12/25 続編が出ました🙆♂️ この記事は記述されてからある程度時間が経過してしまっており、自分の考え方も少し変化してきています。 その変化について新しく以下の記事を書いたので、ぜひ参照してみてください。 追記 以下の記事は@testing-library/react-hooksのv3系を使っていました。 v5系に上げるとHookResultではなくRenderResultになったようなので、v5を使われる場合はRenderResultの方をお使いください🙏 🦍 テストコードを書くことがプロダクトコードを書くことと、同じくらい重要であるという認識が浸透しつつある昨今、多くの関数にはおそらくテストがあることと思います😊 最近はReactの開発がメインです。 僕は毎回フロントエンドでテストを書く場合は以下のような方針をとっています。 コンポーネントのテスト storybo
これからReactを学んでいくためのロードマップ
「Reactをこれから改めて学ぶにはどの記事を参考にしたらいいか？」と聞かれることがあり、勢いで羅列した記事になります🔥 本記事自体にReactを学ぶための中身はなく、学んでいく上で参照すべき記事を独断と偏見でまとめたロードマップです。 すべての記事を読んだ上でマスターできるというよりは、より早くReactについて理解できる一助となれれば幸いって感じの記事です🙏 【@catnose99さんコメントからの追記】 じっくり学びたい方は FreeCodeCampのReactチュートリアルもよさげです！英語ですが扱う内容がステップバイで幅広く初心者にやさしい内容です。無料です🔥 前提 関数、オブジェクト、配列、あるいはクラスといったプログラミングにおける概念について、馴染みがあること🎨(公式チュートリアルより) 手順 Step1. 公式のチュートリアルをやる Reactの公式サイトにあるチ
経年劣化に耐える ReactComponent の書き方
「経年劣化に耐えるコード」というのは、だれもが目指すものでしょう。「そもそもフロントエンドのコードは、今ある技術で最良のものを書き捨てるべき」という意見も理解できますが「備えあれば憂いなし」ということもありますので、ここにメモを残します。あくまで、私なりのベストプラクティスですのでご了承ください。 5層に別れた SFC 私はレイヤーによる技術の分離で、ReactComponent の経年劣化に備えています。ここでいうSFCとは「Stateless Functional Component」の略称ではありません。Vue.js の文脈にある「Single File Component」を指します。 // (1) import層 import React from 'react' import styled from 'styled-components' // (2) Types層 type
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり
React Hooks Testing
この記事は「DMMグループ Advent Calendar 2019」21日目の記事です。 フロントエンドエンジニアは数年前に比べ、技術の幅が広がったことにより担当するべき作業も増えてきています。 テストもその中の一つです。フロントエンドのテストは実装に対するユニットテストだけでなく、コンポーネントのユニットテスト、e2eテスト、Visual Regression Testと考えることが多くあります。 その中で以前書いた「Hooks時代のユニットテスト」というReact Hooksのテストに関する記事が結構反響があり、数ヶ月テストを運用してみて、個人的なReact Hooksにおけるユニットテストをどうすべきかを考えたので、Testing Library・Jestを使う方法で紹介します。 TypeScriptがデファクトになりつつあるので、今回はTypeScriptで書いてるよ！ Reac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mantine
Hooks時代の設計の話 #agrinoteinside