フロントエンド(Next.js)のテストについてまとめる - Qiita
はじめに 私はこれまで、独学でフロントエンドの技術を学習し、いくつか練習用にWebアプリケーションも開発してきました。 2021年の10月にフロントエンドエンジニアへの転職を果たし、現在は研修を行っています。 そしてこの度、他の研修生とチームを組んで、社内用(研修生用)のSNSアプリケーションを開発することとなりました。 今までは趣味レベルの個人開発しかしておりませんでしたが、今回初めて、実際に人に使ってもらうものを作成することになります。 そこで、これまで意識してこなかった(避けてきてしまった)ソフトウェアテストもしっかりと行わなければならない、と感じ、１からフロントエンドのテストについて学習することにしました。 そこで学んだことを、メモ帳代わりに、ここにまとめたいと思います。 まずはじめにフロントエンド全体のテスト手法について、その後、現在開発で使用しているNext.jsでどのようなテ
ReactでTesting Library/Jestを使ってテストを学ぼう | アールエフェクト
Reactを学び始めてコードを書けるようになったので記述したコードのテストを実行してみたいという人を対象にReactでのテスト方法について説明を行っています。 Testing Libraryとは？Jestとは？ Reactでのテストを行う前にテストに利用するライブラリについて説明を行っておきます。 ReactアプリケーションのテストはTesting Library、Jestを利用して行うことができます。Testing LibararyもJestもReactに限定されたライブラリではありません。VueやSvelteを含めた他のフレームワークでも利用することができます。Testing LibararyではReact用のReact Testing Libraryが提供されておりcreate-react-appを利用してReactプロジェクトを作成すると自動でインストールされます。Tesing L
(自分の) JavaScript のユニットテストの書き方
(社内用ドキュメントの公開版) テストのポリシー 前提として、ユニットテストを導入するコストを、限界まで低くすることを目指す。テストが根付いていない言語環境や文化では、放っておくとテストが書かれないまま実装が進行し、結果としてテスト不可能な巨大な雪だるまが完成する。こうなるとメンテコストが高いE2Eを大量に書かないといけなくなり、テストの実行時間が膨れ上がっていく。 そうなる前に、ユニットテストを書きやすい環境を維持し、ユニットテストとして問題を切り分けられるような環境を維持する。とにかく書きやすさを重視し、一つのユニットテストを書くオーバーヘッドを限界まで下げる。 最初の一つを早い段階で書く 自分の経験的には、ユニットとテストの最初の一つを書いたらあとは自然とその周辺で増えていく。サンプルがあったら人はコピペする。逆にいうと最初の一つを書かない限り一切書かれない。まず一つ用意するのが大事
React + Testing Library + Jestの覚書
最近、Zenn に全然(?)記事書けてないなぁっていうのと、フロントエンドのテスト大事やなぁと感じることが多かったので、React + Testing Library + Jest の覚書を雑に書くことにした (特定の用途で覚書まとめたら、この内容だったら Zenn にも出せるやんか、とかそんなことがあったわけでは断じてない) JavaScript のテストフレームワークである Jest について Create React App(以下:CRA)ではテストランナーに Jest を採用している https://create-react-app.dev/docs/running-tests CRA での Jest のコンフィグのベースは下記の実装を確認する https://github.com/facebook/create-react-app/blob/main/packages/react
フロントエンドテストプラクティス in open 8
2021/09/13 Open8 で発表したフロントエンドテストプラクティスの話です。
テスト優先度をあげたくなる実話 - フロントエンド版 -
Storybook・テストに関して「メンテナンス工数に見合うだけのメリットがあるか？」という議論を、経験したことはないでしょうか。フロントエンドは、とにかく動くものを作ることが優先され、Storybook・テストが二の次になっている現場も少なくないと思います。 限りある工数を割きチームで取り組むものですから、導入するためには「どういったメリットがあるのか？」という具体的な例をチームに示す必要があります。これは今年、筆者が体験した実メリットのお話です。導入を躊躇している現場にむけ、参考になればと思い書きました。 【Storybook】不要な Global CSS を削除できた きちんとコンポーネント設計され、コンポーネントに閉じた指定をしていたとしても、どこかに必ず Global な CSS があると思います。何かしらの資材を受け継ぎ立ち上げたプロジェクトに関しては、Global な CSS
Next.js使ったプロジェクトでテストを書く
はじめに この記事はNext.js使っていて、これからUnitテスト書こうと思っている方向けの記事です 大まかな流れ 他のNext.jsプロジェクトでどんなテストライブラリ使っているか調べる テスト環境を整える 簡単なテストを書いてみる How to まとめ Next.js + Typescript構成でよく使われているテストライブラリ jestはどこのプロジェクトでも使っていそう Reactのコンポーネントのテストは Enzyme vs React Testing Library という感じ EnzymeとReact Testing Libraryの比較は以下の記事がとても参考になり読ませていただきました Enzyme vs React Testing Library結局どっちがいいのか問題に対する個人的な回答 - Qiita 今回はUnitテストが書きやすそうな Enzyme でやって
ReactのSPAでUIへのテストを真面目に取り組んでいく話 - Studyplus Engineering Blog
こんにちは。ForSchool事業部の@okuparaです。最近入社しました。今後ともよろしくお願いします。 Studyplus for SchoolはReactを使用したSPAとして構築されています。フロントエンドのテスト関しては以前よりReduxやロジックに対してのテストがいくつか存在していたものの、コンポーネント(UI)のテストはあまり存在していませんでした。最近自分の方でこの辺の足りていなかったUIテストへの対応を行ったので、その時のお話を書きたいと思います。 Unit tests, Integration testsについて 元々フロントエンドのリポジトリにはEnzymeが入っていましたが、今回react-testing-libraryにしました。Integration testsを書くのに相性が良いと思ったからです。 テストの話をする際に、Unit tests、Integrat
React Testing Libraryでテスト駆動アクセシビリティ改善 - Qiita
はじめに この記事内で扱うアクセシビリティとは、HTMLのマシンリーダビリティのことを指します。 配色、UIデザイン等は対象外としております。 アクセシビリティ観点を含めた画面機能のテストコード 私のプロジェクトの要件にアクセシビリティは含まれていません。工数インパクトを出さない範囲で気を遣っていこうという方針で開発をしていました。 要件に入っていないのでアクセシビリティの検証に工数を多く注ぐことは許されていません。しかし、考慮する以上は何らかの検証をしなければ実装の誤りに気がつくことができず、ない方がマシという状態になりかねません。 各コンポーネントのアクセシビリティを改善する際テストコードの中でアクセシビリティ検証を盛り込み、テスト駆動的に開発することでローコストかつ確実に改善を進めていく方法を実践したので記事にします。 WebシステムUIのアクセシビリティを向上させるモチベーション
2020-06-05 AI自動テストツールまるわかりミートアップ (オンライン) #ai_test_automation｜諏訪真一
2020/06/05 に開催された AI自動テストツールまるわかりミートアップ (オンライン) のイベントレポートです。 ●イベント概要 AI技術の活用という新しいトレンドにより、自動テストツールの世界に大きな変化の波が訪れています。 この変化をリードしているのはオープンソースよりも商用のツールやクラウドサービスで、これまでにない使いやすくて便利なサービスがたくさん登場してます。 このミートアップに参加することで、時代の最先端をいくAI自動テストツール各社の製品や取り組み・特徴を、まとめて押さえることができます。 まだしばらくイベント自粛が続きそうですのでオンライン開催となりますが、その代わりに世界中どこからでもご参加いただけます。途中入退室も自由ですので、お気軽にご参加お待ちしております。 イベントURLは https://live.remo.co/e/ai です。(イベントツールRem
Redirecting…
Redirecting… Click here if you are not redirected.
TestCafe入門 | 第1回 TestCafeとは
TestCafe入門 第1回 TestCafeとは TestCafeはJavaScriptのEnd-to-Endテストを行うフレームワークです。ブラウザでの操作を自動化してテストを行いますが、WebDriverの個別インストールが不要で、環境構築が容易です。 はじめに TestCafeは、E2E（End-to-End）*でブラウザテストを自動化するためのフレームワークです。この記事では、TestCafe（テストカフェ）の紹介とテストの実際について解説します。 *注：E2Eテスト E2Eテスト（結合テスト）については、過去の記事を参考にしてください。 JavaScript開発のためのテスト入門 - 結合テスト | CodeGrid TestCafeの特徴 TestCafeは最初のコミットが2015年の4月、最初のリリースが2016年10月と比較的新しいE2Eテストフレームワークといえます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactアプリケーションのテスト戦略
test: add initial test module by cjihrig · Pull Request #42325 · nodejs/node
StorybookのUI Testing Handbookを読んだ
データサイエンスレガシーコードに立ち向かう #reprotech