![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-03-16T01:00:41+00:00","default:admin","admin") -[[【入門】フロントエンドのテスト手法まとめ:https://qiita.com/KNR109/items/7cf6b24bed318dab5715]] -[[【2023年版】Jasmine vs Mocha vs Jest！JSテストフレームワークを徹底比較。:https://ugo.tokyo/jasmine-mocha-jest/]] #author("2023-03-16T01:02:09+00:00","default:admin","admin") *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/]] -[[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/]]
