JavaScript

CypressでGoogleのOAuth認証のログインをする

CypressでGoogle, Facebook, Microsoft, GitHub などのOAuth認証のログインを実施する方法を紹介します。CypressでOAuth認証を実施する方法はいくつかあるのですが、この記事ではGoogleのOAuthに対してフォーム入力する方法を試しています。 CypressでOAuth…

E2EテストツールのCypressをさわってみる

Cypressをさわりながら基本的な機能の紹介をしていきます。CypressはE2Eテストツールとして人気のツールです。ぜひ、基本的なコンセプトについて理解を深めてください。 Cypressのインストール E2Eテストを作成する Cypress Appを起動する テストを作成する …

E2EテストツールのPlaywrightをさわりながら基本的な機能を知る

Playwrightをさわりながら基本的な機能の紹介をしていきます。PlaywrightはE2Eテストとして人気が高まっているツールです。ぜひ、基本的なコンセプトについて理解を深めてください。 Playwrightのインストール Playwrightのサンプルのテストを動かしてみる …

Apollo Client のエラーポリシーやApollo Linkでエラーハンドリングする

GrahqQLサーバーではさまざまな種類のエラーが発生します。Apollo Clientはサーバーでエラーが発生した時にエラーハンドリングをエラーポリシーやApollo Linkによって制御することができます。 エラーの種類 GraphQLエラー ネットワークエラー Apollo Client…

Apollo Client のキャッシュの仕組み

Apollo クライアントは、GraphQLクエリの結果を正規化してローカルのメモリ内に保存します。そして、メモリ内のクエリ結果をキャッシュとして利用します。 GraphQLクエリの実行時にクエリ結果がキャッシュにある場合は、ネットワークリクエストを省略して即…

GraphQLクライアントのApollo Clientをさわってみる

この記事では、GraphQLクライアントのApollo Clientをさわってみて、感触を掴んでもらうための記事です。 動作確認バージョン create-react-app : 5.0.1 react : 18.3.1 @apollo/client : 3.10.1 graphql : 16.8.1 Apollo Client とは Apollo Clientのインス…

React Testing LibraryでReactコンポーネントを基本的なテストをする方法

React Testing Libraryで基本的なReactコンポーネントをテストする使い方を説明します。 React Testing Libraryとは Reactコンポーネントをレンダーして要素をテストする方法 要素を取得する方法 Reactコンポーネントのインタラクションテストをする方法 API…

JavaScriptのテスティングフレームワークのJestを5分でキャッチアップ

この記事では、Jestの基本的な使い方をざっくり説明します。Jestの主要機能を確認したい、Jestの雰囲気をつかみたいといった方向けです。Jestをより詳しく知りたい場合は、公式ドキュメントをご確認ください。 Jestとは Jestでテストを書く JestのMatcherを…

React.jsのオフィシャルサイトのLearn React を読み直してみた

React.jsのオフィシャルサイトのLearn React (https://ja.react.dev/learn) を改めて読み直したました。 Reactを学習し始めたときだけでなく、Reactに慣れてきたときこそ読み直すとまた新たな学びがありました。より深くReactを理解して使いこなすためにもぜ…