基本からしっかり学ぶフロントエンドテスト入門 | 技術評論社
概要 AIによるコード生成が現実となった今、ソフトウェアテストの重要性はますます高まっています。AIエージェントの能力を最大限に発揮する上でも、テスト自動化などを含む開発基盤の整備は必須のものになってくるでしょう。本書では、フロントエンド開発の現場で効果的にテストを導入・運用するための力を身に付けることを目的に、フロントエンドテストの全体像を基礎から体系的に解説します。テストの意義や種類といった基礎から始まり、静的テスト、ロジックテスト、コンポーネントテスト、E2Eテスト、そしてビジュアルリグレッションテスト（VRT）まで幅広くカバー。さらに、Storybookを活用したテスト手法やAPI通信を含む実践的なケース、テスト戦略の設計、そして現場視点でのAI活用ノウハウまでを丁寧に解説します。フロントエンド開発におけるテストを本格的に学びたい方に最適な一冊です。 目次 第1章 フロントエンドテ
Writing Good Unit Tests
In my first job as a software engineer the project I was working on grew out of control. As often happens, use cases were added without proper refactoring and with more users we were drowning in support tickets and nothing seemed to work. It was clear we needed to push for quality so we started adding unit tests. The tech lead at the time mandated high test coverage. But here's the reality: writin
Why I Won’t Use JSDOM
If you’ve been testing anything front-end related in the past 10 years, you’ve likely used JSDOM. In itself, JSDOM is not an environment or runtime. It’s a polyfill library, containing implementations for a bunch of WHATWG standards, like HTML and DOM, for Node.js. Why Node.js? Well, because the library’s goal is to execute browser-oriented code without paying the cost of spawning the actual brows
vitestではbeforeEachを使わない
はじめにlink 最近DBありのテストを記述していた際に、実はvitestではbeforeEachは必要ないのではないか、という考えに至ったのでその理由と設計についてまとめてみる。 下記のリポジトリで実験する https://github.com/koh110/vitest-beforeeach テストでbeforeEachが欲しくなるシーンlink テストを記述する際にbeforeEachが欲しくなるシーンは主に以下の2点ではないかと考えている。 mockの設定/reset seedsの投入 このうち、前者mockの設定/resetはbeforeEachではなくbeforeAll or すべての個別テストごとに設定すべきなのではと考えている。 これは自分がテスト単体での移植性を重視している（テスト単体をコピペしてもなるべくそのまま動かせる）ので、beforeEachでやってしまうとあるテ
Accelerating Large-Scale Test Migration with LLMs
By: Charles Covey-Brandt Airbnb recently completed our first large-scale, LLM-driven code migration, updating nearly 3.5K React component test files from Enzyme to use React Testing Library (RTL) instead. We’d originally estimated this would take 1.5 years of engineering time to do by hand, but — using a combination of frontier models and robust automation — we finished the entire migration in jus
Storybook をフル活用してテストを実装したその後の話 - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。 こんにちは、フロリアでエンジニアとして活動している hacchan です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 以前、そのフロリアのチームの 1 つである Reactone チーム が Storybook をフル活用してテストを実装した話 を紹介しましたが、今回はそのアフターストーリーを紹介します。 Storybook のフル活用はやめた 以前の Reactone チームでは、Storybook の Test Runner を使って、Integration Test を実行するなど、Storybook をフル活用してテストを実装していましたが、新たな領域の刷新を開
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
2024-02-05のJS: TypeScript 5.4 Beta、Learn Testing/Performance、Interop 2024
JSer.info #679 - TypeScript 5.4 Betaがリリースされました。 Announcing TypeScript 5.4 Beta - TypeScript クロージャーにおけるNarrowing結果の改善、NoInfer Utility Typeが追加されています。 また、ES2024のObject.groupBy/Map.groupByをサポート、Import Attributesのサポートが追加されています。 そのほかには、target: "ES3"やoutオプションなどを非推奨として、次のTypeScript 5.5で削除されることがアナウンスされています。TypeScript 5.5で削除されるオプションは、次のIssueにまとめられています。 Feedback: 5.0 deprecations · Issue #51909 · microsoft/T
Changelog: Cypress App | Cypress Documentation
15.19.0 Released Jul 21, 2026 Performance: Fixed an issue where the browser's renderer process could crash (We detected that the Chrome Renderer process just crashed) when the application under test triggered a ResizeObserver loop while the command log was visible. Fixes #33962 and #34218. Fixed a regression in 14.0.0 where each message sent from the Cypress server to a Chromium-based browser (in
Make Your Jest Tests up to 20% Faster by Changing a Single Setting
TL;DR When you have Jest as your test runner, passing the --maxWorkers=50% option will make the tests faster in most cases. For watch mode, use --maxWorkers=25%, and for CI disable Jest workers with --runInBand. You can experiment with the percentage and fine-tune for your particular setup. // package.json { "scripts": { // standalone Jest "test": "jest --maxWorkers=50%", "test:watch": "jest --wat
フロントエンド（React Testing Library）で TDD（テスト駆動開発）をする
私はフロントエンドエンジニアとして働いてはいるのですが、巡り合わせが悪いのでしょうか？まともなテストを書いたことがないんですよね。まあ、それもでテストくらい書けないとなぁ。なんて思ってはちょいちょい調べたりする日々を過ごしていました。 そんなある日、たまたま TDD（テスト駆動開発） についての動画を視聴してみました。 TDD 自体は知ってはいて、なんとなく知っているくらいの知識ではありましたが、分かりやすい説明とその思想が好きで、のめり込むように見てしまいました。 その後も何度か視聴して、フロントエンドでも TDD したいなと考え始めました。 普段テストすら書いていないのにいきなり TDD とも思わないこともなかったですが、実際に普段自分がさわっているようなコードに落とし込んで書いていくと、テストする本当の意味というものが、より正確に理解できてきたような気がします。 そんなテスト初心者の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Release 3.0.0-rc1 · qunitjs/qunit
GitHub - web-infra-dev/rstest: The testing framework powered by Rspack.
Release v2.6.0 · mswjs/msw
Storybook 8.1
power-assert-monorepo/packages/node at main · twada/power-assert-monorepo
Release v2.3.0 · mswjs/msw
Release v2.0.0 · qunitjs/js-reporters
GitHub - sorry-cypress/sorry-cypress: Open-source, free, self-hosted alternative to Cypress Dashboard
Release 2.11.0 · qunitjs/qunit