Webサービス公開前のチェックリスト
個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお
Nuxt Test Utils で始める効率的な Nuxt アプリケーションのテスト
【Oracle Cloud ウェビナー】基幹システムのクラウド化は可能か？失敗しないための検討ポイントと規模別事例をご紹介
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
【Jest】SpyOnで関数のMock化ができない場合の対処 - echo("備忘録");
概要 JavaScriptのソースを単体テストする際、Jestを使っている人も多いと思います。 jestjs.io で、ある関数のテストをする際に、その関数が呼ぶ別の関数を一時的にmock関数にしたい場合があります。 Jestでは、それをspyOn()というメソッドを使うことで実現できます。 // 例：例えばこのvideo.play()関数自身はtrueを返すけど... const video = { play() { return true; }, }; module.exports = video; const video = require('./video'); test('plays video', () => { // こんな感じでspyOn()してあげることで、mock関数化して、 // そのふるまいを自由に定義できる。 // ここではfalseを返すように変更している co
Nuxt3 + Vitestでのコンポーネントテスト作成について個人的まとめ - Qiita
Nuxt3 + Vitestでコンポーネントテストを作成した際の自動インポートやモック化などのポイントをまとめておきます。（Vue3共通の内容も含みます） ref, computedオブジェクトをテストファイル側で使用する コンポーネント側で定義したref, computedオブジェクトをテストファイル側で使用するにはdefineExposeで明示的に公開する必要があります。 <script setup lang="ts"> const lastName = ref('') const firstName = ref('') const fullName = computed(() => { return `${lastName.value} ${firstName.value}` }) defineExpose({ lastName, firstName, fullName }) </s
Vitest のモック関数 fn、spyOn、mock の使い分け - Qiita
はじめに この記事では、Vitest というテストフレームワークのモックに利用される vi.fn、vi.spyOn、vi.mock の概要とそれらの使い分けをサンプルつきで記載していきます。 fn、spyOn、mock の使い分け モック対象によって使い分けます。 fn：関数 spyOn：オブジェクトのメソッド mock：モジュール全体 fn fn は、関数をモックします。 以下のサンプルでは、getApples というモック関数を作成し、その関数が呼び出されることをテストしています。 test("spy function no arguments and no returns", () => { // Define mock function const getApples = vi.fn(); // call mock function getApples(); // check if
JestでYupのvalidationSchemaのテストを書く - Qiita
React+Yupでフォームを作っていた際、フォームの項目が増えれば増えるほどバリデーションの抜け漏れが増え、QAで返ってくる項目が多くなってきたのでこれはよくないな…と思ったのと手作業で何個も色んな項目を都度チェックしていくのが面倒くさいなという気持ちになったので、Jestを使ってYupのバリデーションのユニットテストを書いてみました。 サンプルコード GitHubに実際に動作するコードをアップしてます。 https://github.com/unachang113/yup-schema-test-sample 1. 簡単なschemaのテスト 1.1 テスト対象のスキーマ まずは以下の簡単なschemaのテストから行っていきます。 import * as yup from "yup"; export const idValidationSchema = yup .string() .r
【入門】フロントエンドのテスト手法まとめ - Qiita
はじめに 自分は2021年に新卒でweb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっていなす。 今回は実務でNext.jsプロジェクトにテストを導入することになり「React-Testing-Library」と「Jest」について改めて学び直したのでその内容を紹介します。 はじめに「React-Testing-Library」と「Jest」の概要を説明しその上で具体的なテストコードを何パターンか書いていきます。 この記事の対象者 フロントエンドのテストの概要を知りたい人 React-Testing-LibraryとJestについて知りたい人 具体的なテストの書き方を学びたい人 なお本記事では、React-Testing-Libraryの具体的な書き方についてをメインにしている
フロントエンドにおける「単体テストの考え方/使い方」
本稿における「単体テスト」とは自動テストにおける単体テストを指します。手動テストのことではないので、ご了承ください。 単体テストの考え方/使い方という本を読みました。筆者自身、「単体テストはプロダクションコードの付属」という意識がどこかにありました。この本を読んで、単体テストについてあまりに何もわかってなかったことに気付かされ、単体テストの設計はプロダクションコードの設計と同じくらい重要という意識に変わりました。何のために単体テストをやるのか、いいテストとは、「単体」とは、など多くの点で学びを得られ、また、多くのプラクティスとアンチパターンを知ることができました。 本稿はこの本を読んで得られた学びを、フロントエンド開発、特にコンポーネント開発に適用することを試みた際のまとめです。より詳細な解説を求む方には本を手に取ってもらう前提で、できるだけポイントを抑えられるようにまとめることを目指しま
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
Nuxt 3 × Vitest でユニットテストのエラーを全て解消するための調査レポート - ANDPAD Tech Blog
Nuxt 3 × Vitest で既存のユニットテストを全て通すための調査レポート こんにちは、ANDPADでフロントエンドエンジニアをしている小泉（@ykoizumi0903）です。 昨年末に Nuxt 3 が正式リリースされて以降、アップデートに向けた移行作業を粛々と進めています！ 今回はその中でも、ユニットテストを Nuxt 3 に対応させる際に苦労したポイントや対処法についてご紹介したいと思います。 私達のチームでは昨年秋以降、コンポーネントユニットテストの拡充に力を入れてきていて、その一環として元々 Jest から Vitest にテストツールを移行していました。 しかし、Nuxt 3 への移行作業を行ったことで、これらのテストのうちの約半分が失敗するようになりました。 この記事では、このテストのエラーをどのように解消したかの流れをまとめて説明したいと思います。 （Nuxt 2
あなたの先輩がやたらデバッグが早いからくり
誰しもこんな経験があると思うの 「エラーが出てしまった...２時間くらいコード読んでるのだけどどこが悪いかわからない...」 「ちょっと見せてー、んー、この辺じゃねーかな、あぁこれだよ」 「な...秒...だと...」 って あるよね あったあった 人外に見えたなー ベテランともなると歴戦の勘でいともたやすく🐞を見つけてしまうのです 仙人クラスになるとエラーメッセージからコンピュータの気持ちがわかるものです なんてのは当然違います テキトーにやってる様に見えるデバッグも、ちゃんとロジックツリーがあるのです とある一例 エンジニアくんと先輩に出てきてもらいます どうやらエンジニアくんがどんなにコードを読んでみても２時間くらいずっとエラーが解決できないみたいです （実際にはもっともっと込み入った問題でしたが、簡略化してアレンジしてあります） テストを書いたのだけれど、通らなくてエラーになって
WebのE2Eテスト自動化〜ツール選定編〜
こんにちは！ 株式会社ココナラのプロダクト開発部 QA チーム所属のまると申します。 弊社では現在リリース時のリグレッションテストの大部分を手動かつモンキーテストで実施しています。そのためテスト工数が高く、さらにテスト漏れも発生し、予期せぬ機能で障害が発生してしまうことがありました。 この状況を鑑み、QA チームではテスト効率化とプロダクト品質の更なる向上を目指し、今期からWeb の E2E テスト自動化を再整備しています。 本記事で自動化ツールの評価を行い、Playwrightを選定するまでのプロセスを記載します。 前提 テスト自動化ツールAutifyを利用して、定性的に重要と判断された一部機能を対象にリグレッションテストを自動化している 現状の課題 ツール制約上、対応できない機能が発生している 現状の自動化率は 50%未満 全テストケースを実行するとテスト実行完了までに半日要する 画面
ChatGPT (GPT4) と TDD ライクなペアプロするとどうなるか試した
(2024/05/19) GPT4o で同じことをやった はじめに ChatGPT などにプログラムコードを生成させることを考えたときに、現時点で現実的な使い方は主に以下の二通りであると考えた。 毎回コード全体を出力させて前のものを捨てる 初期バージョンのコードを出力させ、その後の変更などを人間で行う いずれの場合も生成されたコードが期待どおりであるかを検証することが重要となるだろうと考えた。 したがって、人間がテストコードを記述し、それに適合するコードを出力させ、テストスイートに合格するかどうかで適切なコードが出力されたかを判断する。というシナリオが有用そうだと考えた。 場合によってはそのテストコード自体も機械に出力させ、人間がレビューするというシナリオもあるだろう。 今回は TODO MVC を対象に、段階的にテストコードを与えたときにどのようなやり取りになるかを確認した。 また、最初
ユニットテストをGitHub CopilotとChatGPT使って書いてみたらやばかったです | DevelopersIO
GitHub Copilotとの単体テストがやばい。ChatGPTが書いてくれるテストもすごい。もうこれらがない時代には戻れないような気がします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんユニットテスト書いてますか？ 昨今AIがダミーデータを書いてくれたり、ユニットテストそのものを書いてくれたりと技術の進歩がすごいですね。 私はリファクタリングが好きですが、リファクタリングをする前に絶対に必要なもの。 そうテストですね。 今回私がテストを後回しにしてしまった以下のOSSについてGitHub CopilotとChatGPTのそれぞれの力を借りながら、テストを書いてみました ※ これは以前私が始めたプロジェクトであり、OSSとして公開されているので学習に使われても問題のないコードです。 なお、GitHub Copilotの料金や
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
React/Yup/ObjectSchemaのテスト
Nuxt3+VitestでuseStateのテストを書く
Vitest
@nuxt/test-utils vs @vue/test-utils? · Issue #298 · nuxt/test-utils