ユニットテストってもう言わない！ CI/CD時代のテスト分類に最適なテストサイズという考え方
はじめに 以前からユニットテスト/単体テストという言葉は使いづらい、と感じており今回も旧Twitterで「テストを実行時間ベースで分類する良い言葉ないかなー」と呟いていたところ、「テストサイズのSMLって考え方があるよ」と教えて戴きました。 だいたいは教えてもらったt_wadaさんの記事にすべて書いてあるのですが、自分の整理も含めて動画にしたので、その補完記事となります。 TL;DR 単体テストのバベルの塔は既に崩壊 CI/CDでの継続的テストには時間ベースのテスト分類が重要 UT/IT/E2EではなくSMLによるテストサイズがCI/CDには合う それは単体テストか結合テストなのか？ 自動テスト、手動テストに関わらずテストの分類として単体テストと結合テストという言葉は一般的です。 ITQBではTest Levelsという言葉で定義されていますし、以下のようなV字モデルの対応表はみんな知って
114. テスト駆動開発とは何であって、何でなかったのか？ w/ twada | fukabori.fm
MP3ファイルをダウンロード 内容紹介 twadaさんをゲストに、テスト駆動開発(TDD)、TDDに関するよくある誤解などを語っていただいたエピソードです。 出演者 話したネタ 【翻訳】テスト駆動開発の定義 自動テストとテスト駆動開発、その全体像 保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像 テスト駆動開発とは何だったのか？ テスト駆動開発と同じレイヤの手法はある？ テスト駆動開発と品質保証との関連は？ TDD Boot Camp 2020 Online #1 基調講演/ライブコーディング テスト駆動開発に関するよくある誤解 アジャイル開発との類似点（みんな丸い） IPAの試験での誤解 今回のブログを書いた（翻訳した）ことによる懸念 サバンナ便り ～ソフトウェア開発の荒野を生き抜く～ 記事一覧 書籍レビュワー募集フォーム
TDD Boot Camp 2020 Online #1 基調講演/ライブコーディング
本編開始は 19:05 からです こちらのイベントのYoutubeLive配信のアーカイブです https://tddbc.connpass.com/event/183044/ チャプター 0:00:00 準備開始 0:19:05 講演開始 0:41:55 ライブコーディング開始 0:57:20 プログラミング開始 1:02:00 最初の RED ？ 1:19:00 fake it 1:26:50 最初のリファクタリングおわり 1:36:40 質問タイム 1:51:20 5の倍数に着手 1:53:40 前半のデモのまとめ 1:55:20 質問タイム2回目 1:56:45 リリースから3年後の世界（テストをメンテナンスしやすくする） 2:14:20 テストの構造化とリファクタリングの説明
保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より | gihyo.jp
保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像 ～Software Design 2022年3月号「そろそろはじめるテスト駆動開発」より 今回、Software Design 2022年3月号 第2特集「そろそろはじめるテスト駆動開発 JavaScriptでテストファーストに挑戦」の第1章「保守しやすく変化に強いソフトウェアを支える柱 自動テストとテスト駆動開発、その全体像」を本サイトに掲載します。第2章以降については、本誌『Software Design 2022年3月号』電子版（Gihyo Digital Publishing、Amazon Kindle）をご購読いただければ幸いです。 第1章では、混同されることの多い自動テスト関係の概念を、自動テスト、テストファースト、テスト駆動開発の3つの段階に分け、それぞれの効果や注意点を説明します。ソフ
Playwrightのベストプラクティスを翻訳してみた
Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。 原文： Best Practices | Playwright イントロダクション このガイドは、私たちが提供するベストプラクティスに習い、より弾力性のあるテストを書くために役立つはずです。 テスト哲学 ユーザから見えるふるまいをテストする 自動テストは、アプリケーションのコードがエンドユーザのために動作することを検証するものです。関数の名前、何かが配列であるかどうか、ある要素の CSS クラスのような、ユーザが通常使用しない、目にしない、あるいは知ることさえないような実装の詳細に依存することを避けるべきです。エンドユーザーはページ上でレンダリングされたものを見たり操作したりします。したがって、自動テストでは通常、レンダリングされた出力のみを表示/操作する必要があります。
Next.js Middlewareのテストコードを書く
この記事では、Next.js Middlewareのテストコードを書く方法を紹介します。Middlewareはリクエスト時に最初に処理されるパーツで、認証やリダイレクトなどに使われます。パスやCookieなどに応じて分岐するため十分にテストをしないと意図しないリクエストを受け入れてしまう可能性があります。 今回はユニットテストを使ってMiddlewareの動作確認をしていきます。 まずはテスト対象のMiddleware 以下は高階関数を用いて、2つの処理を結合しているMiddlewareコード例です。 IPアドレスのアクセス制限 restrictIp リダイレクト処理 redirectAccountsPath ちなみに今回は高階関数で書いていますが、必ずしも高階関数である必要はありません。素朴に書いてもテストコードは書けます。書きやすい方で問題ありません。 import { type Ne
Vitest(jsdom)でStorybookのStory全部テストする大作戦
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 7日目の記事です。 今北産業 ファイル component.test.tsx を置くと、Storybook test runnerのように全部のStoryのスモークテストとインタラクションテストがVitestとjsdomでできるよ！ ヘッドレスブラウザを使わずにテストできるので、CIやGit hookなど実行時間を少なくしたいシチュエーションで使えるよ！ でもブラウザで実行していないから複雑なインタラクションテストやアクセシビリティテストなど、一部のテストが不安定になるかもね！ 考えて使い分けよう Storybook をテストとして動かす Storybookでは、Storyファイルのplay 関数内にユーザのインタラクション（振る舞い）やアサーション（期待する結果）を記述することで、インタラクションテストを行うこ
Storybook 腐らせない
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツールです。 しかし、このように有用なStorybookが「腐ってしまう」ことがあります。この記事で「腐る」とは、コンポーネントをStorybookに表示するための設定であるStoryが最新の状態に更新されていない、またはプロジェクトにとって負債になっている状態を指します。例えば、以下のような状態が「腐っている」状態にあたります。 npm run storybook するとそもそもエラーがでて表示されない Storyの存在しないコンポーネントやコンポーネント
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
ASTERソフトウェアテストチャンネル
「ASTERソフトウェアテストチャンネル」はNPO法人ASTERの公式Youtubeチャンネルです。本チャンネルでは、ソフトウェアテストについてのオンラインセミナー動画やASTERの事業の動画などを公開します。NPO法人ASTERでは、次のような事業に取り組んでおります。 ・ソフトウェアテストのシンポジウムである...
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
【翻訳】テスト駆動開発の定義 - t-wadaのブログ
このブログエントリでは、テスト駆動開発（TDD: Test-Driven Development）の考案者Kent BeckがTDDの定義を改めて明確化した文章を、許可を得たうえで翻訳し、訳者の考察を沿えています。 きっかけ 2023年の年末、テスト駆動開発（TDD: Test-Driven Development）の考案者Kent Beckは、substackにTDDに関するポストを連投して論戦を繰り広げていました。TDDはその誕生から20年以上が経ち、その間に「意味の希薄化」が発生して議論が噛み合わなくなっていました。意味の希薄化（Semantic Diffusion）とは、新しく作り出された用語が広まる際に本来の意味や定義が弱まって伝わる現象です。 私（和田）はTDDと関わりの深いキャリアを歩んできました。Kent Beckの著書『テスト駆動開発』の翻訳者であることもあり、TDDの正
E2EテストでNextAuth認証(OAuthなど)を突破する方法
NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 しかし、Google認証などの外部のプロバイダを経由するような場合は、E2Eテストをすることが難しくなります。そこでこの記事では、NextAuthの認証済み状態をPlaywrightで再現させる方法を紹介します。 やり方は大きく2つ NextAuthの設定に依存してやり方は大きく2つあります。 セッションデータを database で管理している場合 セッションデータを jwt で管理している場合 データベースの場合 セッションデータをデータベースに
@storybook/test を使って next/navigation をテストする
Storybook の play function や test-runner が登場し、Storybook をコンポーネントカタログの用途だけでなく、テストに活用するプロジェクトは増えていると思います。 今回は play function を使って next/navigation および next/router のテストをする方法を紹介します。 結論 .storybook/preview.tsx を以下のようにしてください。 import { action } from '@storybook/addon-actions' import { fn } from '@storybook/test'; const defaultNavigationContext = { push: fn((...args: any[]) => { action('nextNavigation.push')(
フロントエンドにおけるテスト駆動開発の実践と概説
はじめに 自動テストが叫ばれて10数年以上の時を経ていますが、今なお開発者の興味を惹くトピックの1つであります。 実際、Developers Summit 2023ではテストを主題とした講演が多く、また人気も博したと耳にします。 さて自動テストと共に話題になるトピックの1つと言えばテスト駆動開発でしょう。 ただテスト駆動開発は、設計・開発手法のため自動テストとは厳密にはジャンル違いであり、誤解を受けがちなトピックでもあります。 またテスト駆動開発を解説する書籍の多くが、Java等のオブジェクト指向言語のスタイルで書かれているためフロントエンドエンジニアのコードスタイルとは若干差異があリます。 当記事ではフロントエンドエンジニアのためにテスト駆動開発の技法の数々をTypeScript、Reactを用いて実践します。 フレームワークとしてReactを採用しましたが、記事内のコードはモダンフロン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blazor-testing from A to Z - Egil Hansen
GitHub - testcontainers/testcontainers-rs: A library for integration-testing against docker containers from within Rust.
JSConf JP 2023「STORYBOOK駆動開発 UI開発の再現性と効率化 / 木下 博貴(株式会社カオナビ)」
Modern frontend testing with Vitest, Storybook, and Playwright - Defined Networking
GitHub - connectrpc/connect-playwright-es: Utilities for use with Playwright and Connect-ES.