Testing Library

先日、同僚と京都にワーケーションに行きまして、京都の良さを改めて感じている大角です。 goodpatch-tech.hatenablog.com 前回はReact Componentのテストについて書きましたが、今回はカスタムフックのテストについて書きたいと思います。 React Componentのテスト（前回の記事） カスタムフックのテスト（今回の記事） Recoilのテスト npmパッケージの各種バージョンなどは前回の記事に記載しています。 また、カスタムフック自体の説明はReactの公式ページをご参照ください。 React Testing LibraryとReact Hooks Tes…

最近、韓国ドラマと個人開発に勤しんでいる大角です。 Webサービスを提供する上でテストを自動化するケースも多いと思いますが、今回はReact Testing Libraryを使った基本的なテストの書き方についてご紹介したいと思います。これからReactでユニットテストを始めたい方などのご参考になれば、幸いです。 テストの内容については３回の記事に分け、今回の記事では最初のReactコンポーネントのテストを取り上げます。 React Componentのテスト（今回の記事） カスタムフックのテスト Recoilのテスト なお、執筆時点での関連するパッケージのバージョンは以下になっています。 cr…

create-react-appで作成されたプロジェクトにおいてTesting LibraryとJestの関係性を整理しようとした時、Testing LibraryはJest, AVA, Chai...の並びでテストランナーなのではないかという誤解が生じた。そしてtesting-library/jest-domはテストランナーとしてのTesting LibraryをJestに移行するためのツールとして理解しようとした。 誤解が生じた1番の原因は、package.jsonのdependenciesやscriptsにjestが見当たらなかったからだと思う。 けど、Testing LibraryはL…

Deno標準モジュール解説［前編］ ～Deno標準モジュールの概要と、モジュール解説（Archive～FMT） | gihyo.jp Deno標準モジュール解説［後編］ ～モジュール解説（FS～Wasi）と、Deno標準モジュールの今後の展望 | gihyo.jp Deno標準モジュールって結構多いんだな。Goみたいに外部依存を少なめにできるなら良いな。 Testing Libraryのテストは fireEvent より user-event を使おう - 駄文日記 2nd side act忘れてハマったことあったなー。簡潔に書けるのは良さそうに見える。 GitHub - oslabs-bet…

はじめましての人ははじめまして。そうでないひとはお久しぶりです。猫ロキP(@deflis/id:deflis55)です。 みなさんはReactでテスト書いてますか？私は最近書き始めました。 タイトル通りなんですが Testing Library のテストは、Testing Libraryに標準で入っている fireEvent よりも、外部ライブラリの @testing-library/user-event を使おうというお話です。 user-event はシンプルに書ける上に、メリットがたくさんあるのでおすすめのライブラリです。 なぜ user-event を使うべきなのか なぜこれを使おうと…

React Testing Libraryについて勉強したので備忘録です。 ソースコードはこちら テストの種類 Unit Test : コンポーネント単体のテスト Integration Test：ReduxStoreにアクセスしてコンポーネントテストする E2E：ブラウザでの挙動をテストする Unit Test, Integration Testの手法 → Jest + React Testing Library（EnzymeよりHooksとの相性がいい） Jest npm test test case expect React Testing Library render userEven…

create-react-appで作成したReactアプリ(TypeScript)に、ts-jestを導入しようとしたらめちゃくちゃ詰まったので備忘録として残しておく。 事前準備 1. css, svgファイルのインポートでエラーが出る。 jest-transform-stubの導入 テスト環境を jsdom に変更 import '@testing-library/jest-dom' を追加する。 まとめ 事前準備 1. Reactアプリの作成 npx create-react-app test_app --template typescript 2. テストにはjestを使いたいのでpac…

こんにちは！プロダクト開発チームのフロントエンドエンジニアの@uyas_tです！ トラーナでは現在ユニットテストにJestとReact Testing Libraryを利用してReactのコンポーネントテストを行っております。 Testing LibraryにはGuiding PrinciplesというTesting Libraryによるテストの指針があり、そこには The more your tests resemble the way your software is used, the more confidence they can give you. (テストがソフトウェアの使用方法…

みんなー！役に立たないもの作ってるー！？オレは今年もクソも役に立たないものを作ったよ！！ 毎度おなじみクソアプリ Advent Calendar 2022 23日目の記事でございます qiita.com 過去のクソアプリの作品はこちら クソアプリ カテゴリーの記事一覧 - コンユウメモ @kon_yu 人類は距離を克服してもまだ時差は克服できてない ブロードバンドの発達やリモートワークツールの発展によって国をまたいで同期的に仕事ができるようになったよね。でもインターネットだけじゃ時差はどうにもならないんだ。時差を解決するには時間を乗り越える必要があって、そんなテクノロジーはもうデロリアンで時速…

これは Cybozu Advent Calendar 2022 の 22 日目の記事です 🎄 こんにちは、サイボウズ Office の Android エンジニアをやっている向井田 (@mr_mkeeda) です。 2021 年の夏に Stable になって以降、世界中の Android エンジニアの話題の中心になってきた Jetpack Compose は、皆さんも存分に活用されているかと思います。 サイボウズも 2022 年は Compose を本格的に運用した最初の年になりました。 そこで本記事では、サイボウズと Compose の出会いから現在の活用状況まで、そしてこれからの展望を一挙…

こんにちは、エス・エム・エスのフロントエンドエンジニアの城内です。 前職では、ヘルスケア系のスタートアップでソフトウェアエンジニアをしていましたが、2022年8月にエス・エム・エスへ入社し、介護事業者向けの経営支援サービス「カイポケ」の改善をするチームに所属しています。 カイポケの改善を進める開発チームでは、この度フロントエンド専任チームを立ち上げました。この記事ではフロントエンドチーム立ち上げの背景や、チームの立ち上げから進めてきた技術選定について書きたいと思います。 カイポケ改善プロジェクト 介護事業者向けの経営支援サービス「カイポケ」は、4万を超える事業所で導入されている SaaS 型の…

こんにちは。DIGGLE エンジニアの伊藤です。 ソフトウェアテスト Advent Calendar 2022の 20 日目の記事です。 Advent Calendar 初参加になります。 普段はフロントエンドを中心に業務を行なっています。 今回は DIGGLE で実施されているフロントエンドの単体テスト、 特にコンポーネントのテストで使っているフレームワークの使い勝手を向上させたお話をさせていただきます。 はじめに DIGGLE ではフロントエンドで React を使っており、 テストフレームワークとして下記を利用しています。 Jest (https://jestjs.io/ja/) Rea…

この記事は ラクスルの2022年アドベントカレンダー12日目の記事です。 こんにちは！ノバセル株式会社 NA（ノバセルアナリティクス）グループのmartonです。主にノバセルアナリティクスのフロントエンドの開発を担当しています。 今回はノバセルのデザインシステムの一部として、GitHub Organization内で共通利用できるように公開した、コンポーネントライブラリ「novasell-ui」について紹介したいと思います。 背景 そもそもコンポーネントライブラリとは、デザインシステム内で定められた規格やガイドラインに従ったコンポーネント（ボタンやフォームなど）をまとめたライブラリのことです。…

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.ts…

しばらくしたら次のことを考えたいなと思ってるので、よい仕事や空いてるポジションがあったら教えてください！— Mitz Shiiba@フルスタックエンジニア (@bufferings) December 8, 2022 突然ですが CircleCI を辞めることになりました。そのことについてあまり話すつもりはないのですが、今の気持ちだけ書いておくと、びっくりはしたけど特にネガティブな感情はなく、面白い経験だなぁという気持ちです。 この一年間、色々とあまりできない体験をしてきた締めくくりにピッタリです。この状況を受け入れて、流れに身をまかせて楽しもうと思います。 ということで、こんな機会はあまりな…