それに伴い他のメンバーが書いたテストを修正する機会が増えたのですが、修正が難しい場合には一時的にtest.todoとしたり、テストを書いた人に修正を依頼するなどの現象が発生していました。 テストの修正が難しい一因として、testing-libraryが行った画面操作を視覚で確認できないことがありました。そこで昨年導入したStorybookを使って、動作を画面で確認しながらテストを書いていく取り組みをはじめました。 Storybook導入当初の目的についてはこちらに詳しくまとめています。
はじめに デザインシステムが盛り上がっている今日この頃、フロントエンド開発においてコンポーネントカタログとしてStorybookを導入している方は多いのではないでしょうか? 今回はStorybookをコンポーネントカタログとしてだけではなく、テストツールの一部としても使用する方法について書いていこうと思います。 前提 Storybookが導入されていること Jest+Testing Libraryが導入されていること テスト対象のコンポーネントの要件 今回はメールアドレスを入力するフォームコンポーネントをテスト対象とします。 要件は以下です。 inputのid属性とlabelのfor属性が同じであること メールアドレスが未入力の場合は送信ボタンがdisabledであること 実際のコード 筆者がReactに慣れている都合上、Reactで実装した場合のコードになります。 import Reac
React Hook FormとYupを使ったフォームのテストをJestで書いてみました。 Reactを使ったフォームのレンダリングは行わずに、フォームのロジックのみをテストします。 フォームに値をセットして、フォーム送信時に使われる handleSubmit で出力される最終データをチェックします。 スキーマ定義によって出力データが意図しない結果になるバグがあり、コンパクトに検証するために作成したテストです。 testing-libraryのrenderHookを使って React Hook Form のフォームへのアクセスを得る 今回は Testing Libraryを使って React Hook のテストを行います。 React Hook Formはフォームの状態管理を行う useForm というカスタム・フックを提供しています。 renderHookでuseFormをレンダリングし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く