フロントエンド/テストの変更点

追加された行はこの色です。
削除された行はこの色です。
フロントエンド/テストへ行く。
フロントエンド/テストの差分を削除
#author("2023-03-28T13:19:41+00:00","default:admin","admin")
#author("2023-04-27T02:05:10+00:00","default:admin","admin")
-[[【入門】フロントエンドのテスト手法まとめ:https://qiita.com/KNR109/items/7cf6b24bed318dab5715]]
-[[【2023年版】Jasmine vs Mocha vs Jest！JSテストフレームワークを徹底比較。:https://ugo.tokyo/jasmine-mocha-jest/]]

-[[LINE NEWS フロントエンドの自動テストの改善:https://engineering.linecorp.com/ja/blog/frontend-testing-automation-line-news]]

-[[自動テストはなぜあまり書かれてこなかったのか 和田卓人×倉見洋輔×古川陽介がひもとく、フロントエンドテストの歴史:https://logmi.jp/tech/articles/328058]]
-[[“フロントエンドの出現”が、フロントエンドテストのターニングポイント 和田氏が語る、「テストは書いて当たり前の時代」までの流れ:https://logmi.jp/tech/articles/328078]]
-[[「自分たちが考えたモックやスタブは妄想にすぎない」 テスト駆動開発の第一人者が説く、フロントエンドテストの本質:https://logmi.jp/tech/articles/328084]]
-[[「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」 和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性:https://logmi.jp/tech/articles/328087]]

-[[フロントエンドの単体テストについて勉強会を開催しました:https://tech.timee.co.jp/entry/2023/03/28/112706]]

-[[なぜテストコードを書くのだろう?:https://tech.uzabase.com/entry/2023/03/28/181541]]

*Unit Test (単体テスト) [#wc3b6794]
-単体テストは個々の独立した関数やコンポーネントが動作するかをチェックするテスト
-Reactコンポーネント指向においては「コンポーネントが担う責務を明確にする」という単一原則というものがあります。この考えに基づいたコンポーネント設計(良いコンポーネント設計)をすることでユニットテストを書くことができます。
--[[Reactはコンポーネント指向のライブラリ:https://www.i3design.jp/in-pocket/8854#React%E3%81%AF%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E6%8C%87%E5%90%91%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA]]

-[[Visual Studio で JavaScript と TypeScript の単体テストを実行する:https://learn.microsoft.com/ja-jp/visualstudio/javascript/unit-testing-javascript-with-visual-studio?view=vs-2022&tabs=mocha]]

**[[Vitest:https://vitest.dev/]] [#k6e6e57d]
-[[Getting Started:https://vitest.dev/guide/]]

-VitestはVue.jsを開発したEvan You氏によるプロジェクトであり、Jestの機能を拡張するフレームワーク
-Jestを単体で使用する場合よりもテストの実行速度を速くすることができる
-テストへの変更を自動で検知する「ウォッチモード」においては、その違いは特に大きい

-[[vite版JestことVitestでユニットテスト:https://zenn.dev/dozo/articles/c0389705ed4006]]
-[[Vitestを使ってUnit Testingにチャレンジ(Vue, React, Svelte):https://reffect.co.jp/html/vitest]]
-[[Viteベースの高速テスティングフレームワークVitestを使ってみる:https://developer.mamezou-tech.com/blogs/2022/12/28/vitest-intro/]]
-[[Vite + React + TypeScript に テスト環境 Vitest をステップbyステップで作る:https://zenn.dev/longbridge/articles/9d9ec773cb3814]]
-[[Vite対応テストフレームワークのVitestを使ってみた:https://note.com/rescuenow_hr/n/n83b089e7a7e4]]
-[[【TypeScript】Vitestを使ってみる:https://isub.co.jp/typescript/vitest-get-started/]]

**Jest [#ze7512eb]
-[[Getting Started:https://jestjs.io/docs/getting-started]]

-[[Jestでテストを書こう:https://typescriptbook.jp/tutorials/jest]]
-[[Jest で TypeScript コードのユニットテストを記述する:https://maku.blog/p/9xxpe4t/]]
-[[プロジェクトで利用してるテストフレームワーク「JEST」について:https://devlog.neton.co.jp/develop/javascript/%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%82%8B%E3%83%86%E3%82%B9%E3%83%88%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AFje/]]

-[[Jest再入門 - 導入編:https://developer.mamezou-tech.com/testing/jest/jest-intro/]]
-[[Jest再入門 - マッチャー編:https://developer.mamezou-tech.com/testing/jest/jest-matchers/]]
-[[Jest再入門 - スナップショットテスト編:https://developer.mamezou-tech.com/testing/jest/jest-snapshot-testing/]]
-[[Jest再入門 - 関数・モジュールモック編:https://developer.mamezou-tech.com/testing/jest/jest-mock/]]
-[[Jest再入門 - カスタムマッチャー作成編:https://developer.mamezou-tech.com/testing/jest/jest-custom-matchers/]]

-[[Jest と React Testing Library を用いた Integration Test:https://note.com/cyberz_cto/n/n3ba47e0dcfd2]]
-[[Testing with Next.js:https://zenn.dev/takepepe/articles/testing-with-nextjs]]

-[[VScodeの拡張機能、vscode-jestを使ってみた:https://qreat.tech/4959/]]

-[[ChatGPTにJestのテストコードを渡して、TypeScriptの開発をやらせてみた:https://wp-kyoto.net/try-tdd-using-chatgpt/]]

*Integration Test (結合テスト) [#k9a378d7]
-結合テストは各コンポーネントや関数を組み合わせた時に機能が問題なく動作するかをチェックするテスト

-[[Vitest / Playwrightを使ってSvelteのコンポーネントをテストする:https://qiita.com/oekazuma/items/925ddbf48870fb999c19]]

**[[React Testing Library:https://testing-library.com/docs/react-testing-library/intro/]] [#fab4122b]

**[[Svelte Testing Library:https://testing-library.com/docs/svelte-testing-library/intro/]] [#ga705ab2]

*End to End Test (E2Eテスト) [#r063a076]
-E2EテストはサーバーのAPIやブラウザ等の環境でアプリケーションを動かし、システム全体が正しく動くかをチェックするテスト

**[[Playwright:https://github.com/microsoft/playwright]] [#r117d2f1]

-[[Playwrightも知らないで開発してる君たちへ:https://qiita.com/cc822jp/items/6f786a9ed104af1a382f]]
-[[PlayWrightを用いたテスト自動化:https://www.cresco.co.jp/blog/entry/20355/]]
-[[Playwright 入門:https://zenn.dev/optimisuke/articles/f38ea76006d3a6]]
-[[Playwright でコンポーネントテスト:https://zenn.dev/azukiazusa/articles/playwright-component-testing]]
-[[E2Eテストフレームワーク Playwright の始め方:https://blog1.mammb.com/entry/2022/11/10/090000]]
-[[Playwrightを使って実際のブラウザ動作からE2Eテストを作ろう！:https://qiita.com/miruon/items/579d02eb26834259f034]]
-[[E2E テストツールの Playwright を試してみた:https://developers.play.jp/entry/2022/12/09/160940]]

-[[【テスト自動化】VScodeでPlaywrightを使って、自動でE2Eテストを行う～前編～:https://www.vamp.jp/archives/834]]
-[[【テスト自動化】VScodeでPlaywrightを使って、自動でE2Eテストを行う～後編～:https://www.vamp.jp/archives/838]]

-[[Playwrightを使ってコードベースなE2Eテストに移行した話 | Offers Tech Blog:https://zenn.dev/offers/articles/20230116-e2e-test-with-playwright]]

**[[Web Test Runner:https://modern-web.dev/docs/test-runner/overview/]] [#t748cc31]
-[[Web Test RunnerでTypeScriptコードをテストする:https://blog.70-10.net/posts/web-test-runner-typescript/]]
フロントエンド/テスト の変更点

フロントエンド/テストの変更点
