enzyme と react-test-renderer と @testing-library/react を素朴に試す - きみはねこみたいなにゃんにゃんなまほう
React のテスト用ライブラリっていくつかある上に、それぞれサポートしている機能が違うんですよね。 ついでに提供されているメソッドや、メソッドチェーンの様式も様々なので、出来るだけ速やかに繰り返し実行できる環境で触りながら把握できると便利です。 Jest でコンソール出力しながらだとまどろっこしいので、手元でサクサク試せる環境をセットアップした時のメモです。 React のテスティングライブラリ セットアップ それぞれ試していく テスト対象のコンポーネント enzyme react-test-renderer @testing-library/react React のテスティングライブラリ 今回対象にするのは以下の3つのライブラリです。現時点の理解を書き添えてみました。 enzyme shallow レンダリングを行うことができ、複雑なコンポーネントをテストしやすい コンポーネント内で
React のテストは react-dom/test-utils から @testing-library/react に進むと理解しやすそう - きみはねこみたいなにゃんにゃんなまほう
lightbulbcat.hatenablog.com の続きです。React のテスト用ライブラリを色々試した結果 react-dom/test-utils をちょっと触った後で、 @testing-library/react を導入するといいんじゃないかなと思いました。学習順序的な話です。 react-dom/test-utils は React のテストを素朴で馴染みの深いDOM・イベント操作で行えることを確認できます。 ただし記述量が多くボイラープレート的なコードも必要にります。 そこで @testing-library/react を導入するとテストコードが簡潔になります。 @testing-library は高機能ですがその分どのAPIをどう使うべきかで初めは迷います。 react-dom/test-utils を利用した手法を知っていると「とりあえず element だけ捕ま
React Hooks Jest + enzyme + act で useEffect を含むコンポーネントのテストする - かもメモ
react-create-app で作成した React Hooks を使ったアプリケーションのテストのメモ TL;DR 下書き途中にしたまま数ヶ月が経過してしまったので、少し情報が古くなってしまってるかもですが書きかけていた Jest + enzyme + act で React Hooks のテストをしてみたエントリーを揚げます🍤 Jest Jest · 🃏 Delightful JavaScript Testing GitHub - facebook/jest: Delightful JavaScript Testing. Facebook 製 JavaScript のユニットテストツール群。 Snapshot Test などさまざまな単体テストを書くためのfunction群と、テストを実行するテストランナーが含まれている。 create-react-app で作成したアプリには
Vueを昔触った後Reactをどっぷり触ってもう一回Vueを触ってReactに戻って得た感想
最近ReactとVueをどっちも触る機会があったり、「ReactとVueどう選定するの？」という問いを投げられ、スッと答えられなかったな、と後悔があったりしていたので、Vueを触って得られた感想をまとめてみる。 結論としてなにか新しいことを発見したというものではなく、世間で言われている事を自分なりに再構築しただけの結論になったと思う。 TL; DRVueからは全体的に優しさ（Gentleさ）を感じる事が多く、良い点だと感じた大規模になるときReactの堅牢さは魅力的。Vueが大きくなった時に支えられ設計が出来るかは個人的には懐疑的。「こうだったらVue、こうだったらReact」みたいな分岐点があるというわけではないので、最終的には好みになってくると思う。ぞうさんが好きかきりんさんが好きか。これまでのフレームワーク遍歴今回の話をするにあたって、僕と各フレームワークの付き合いをまとめておくと、
Learn to think in React | Pure React
Learn to think in ReactYou don't know React.But not for lack of trying! Tutorials, books, courses, podcasts, blog posts… you've done 'em all, or you've tried to. You've followed along, and sure, it made at least some kind of sense while you were assiduously reproducing each step, but just when you reach the end, everything you supposedly learned just… slips… from your mind into a vast, grey nothin
10分で実装するFlux
10分で実装するFlux 自己紹介 azu @azu_re Web scratch, JSer.info Flux /flˈʌks/ Fluxとは Facebookが提唱したSmalltalk MVCの焼き直し CQRS(Command Query Responsibility Segregation)と類似 データが一方通行へ流れるようにするアーキテクチャ ウェブUIについてそれを適応する 今日の目的 小さなFluxの実装を作りながらFluxついて学ぶ Fluxの特徴: Unidirectional data flow 本当にデータが一方通行に流れるのかを確認する Fluxでよく見る図 登場人物 何か色々いる Action Creators, Dispatcher, Store, React Views... Dispatcher = EventEmitterと今回は考える もっと実装的
Introduction · React Bits
React Bits A compilation of React Patterns, techniques, tips and tricks. Gitbook format: https://vasanthk.gitbooks.io/react-bits Github repo: https://github.com/vasanthk/react-bits Your contributions are heartily ♡ welcome. (✿◠‿◠) Translations by community: 中文版 (Chinese): react-bits-cn Design Patterns and Techniques Conditional in JSX Async Nature Of setState() Dependency Injection Context Wrapper
Presentational and Container Components
BismuthUpdate from 2019: I wrote this article a long time ago and my views have since evolved. In particular, I don’t suggest splitting your components like this anymore. If you find it natural in your codebase, this pattern can be handy. But I’ve seen it enforced without any necessity and with almost dogmatic fervor far too many times. The main reason I found it useful was because it let me separ
react.rocks - react リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
react.rocks - react リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Reactのアニメーションを攻略する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Reactのアニメーションを攻略する 仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の
Repatch - the simplified Redux - RisingStack Engineering
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. I’ve been involved in react–redux projects for several years. After I first met with flux, I was impressed by its expressive power that describes complicated use cases in contrast to other dataflow concepts, which caused many troubles when the complexity of a project increased. The action controlled dat
Introducing Redux Zero
Redux Zero is a lightweight state container based on Redux with a single store and no reducers, 100% written in TypeScript. Less than 1kb (gzip). Made for (p)react ⚛️ By Concrete 💙 We all love Redux. It’s probably one of the few things that are adopted by React, Angular and Vue people. (Thanks, Dan Abramov) But for some cases, Redux is way too much. Maybe you don’t want to add all of that boilerp
生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず… | POSTD
(編注：2016/07/29、いただいたフィードバックをもとに記事を修正いたしました。) 免責事項： 私はJSX、Flux、 ES6 、そして webpack を非常に気に入っています。これらのツールについては他のシリーズで話します。 React.jsが騒ぎを起こしているのはご存知の通りです。確かに、 XMLHttpRequest 以来の良いツールです。しかし、調査に数時間を費やした挙句、あまりに多くの用語に 圧倒された だけで終わっていないでしょうか。JSX、flux、ES6、webpack、react-routerが使える今、 他に必要なのは React の使い方を説明してくれる人だけです。 喜んでください、それがまさに当シリーズでやろうとしていることです。信じられませんか？大丈夫、 2分後、 初めてのReactアプリを作った後には納得いただけるでしょう。何もダウンロードせずに、です。
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplate master ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っている frontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っている デフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っている はじめに 最近の JavaScript について 僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。
ブラウザだけでできるReact・Reduxチュートリアル - Qiita
はじめに 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたJavaScriptライブラリです。 従来の一般的なWebアプリケーションだと、JavaScriptはJQueryなどのライブラリを使ってUIを生成していました。 ところが、従来のJavaScriptのライブラリで書かれたコードはJSのコードが大規模になるにつれてメンテナンスが難しくなるという欠点を持っていました。 それに対してReactは JS内にHTMLタグを埋め込むような記述ができ、「アプリケーションがどのように見えるか」を単純に表現できる データに変更があるときには更新の必要があるコンポーネントだけ更新する コンポーネントという単位でUIを管理することで複雑なUIでもUIを再利用したりテストしやすくする といった特徴を持つことで、複雑なUIを作成するときで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The best way to test Redux Sagas
Difference between Shallow, Mount and render of Enzyme
Difference between Enzyme’s rendering methods
What's the Most Developer-Friendly React Animation Library?