{"id":20067808,"url":"https://github.com/dean9703111/jest-typescript-starter","last_synced_at":"2026-05-04T22:43:44.721Z","repository":{"id":106083276,"uuid":"590694599","full_name":"dean9703111/jest-typescript-starter","owner":"dean9703111","description":"深入淺出 Jest 測試框架(使用 TypeScript)","archived":false,"fork":false,"pushed_at":"2023-01-19T03:17:19.000Z","size":1140,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-22T13:04:46.893Z","etag":null,"topics":["jest","test-driven-development","unit-test-framework","unit-testing","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dean9703111.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-19T01:20:09.000Z","updated_at":"2024-02-24T06:18:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"40a4d57d-0c8f-45ac-9249-f44b804a5d18","html_url":"https://github.com/dean9703111/jest-typescript-starter","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"f1f40751ad5fdef6fe6fbadc72123faa9034728c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dean9703111/jest-typescript-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fjest-typescript-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fjest-typescript-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fjest-typescript-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fjest-typescript-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dean9703111","download_url":"https://codeload.github.com/dean9703111/jest-typescript-starter/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fjest-typescript-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32628211,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","test-driven-development","unit-test-framework","unit-testing","vscode-extension"],"created_at":"2024-11-13T14:03:53.523Z","updated_at":"2026-05-04T22:43:44.706Z","avatar_url":"https://github.com/dean9703111.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 想幫前端專案導入測試框架？也許我的想法與學習地圖能給你一點方向\n\n```\n大綱\n\n一、前端為什麼需要寫測試？\n二、寫測試對開發人員有哪些幫助？\n三、筆者的學習地圖\n```\n\n### 一、前端為什麼需要寫測試？\n\n筆者自首，過去我只撰寫後端測試，總是忽略前端測試的重要性。\n\n當初會這樣，是因為經手的專案規格變動頻繁，感覺測試寫完沒多久就要棄用；但近期與業界的朋友聊天時，他們跟我強調了 TDD（Test-Driven Development），也就是「測試驅動開發」的概念。\n\n這名詞也不是第一次聽到，但是否對專案有幫助我也是心存懷疑。\n\n針對這個疑問，朋友很認真的回應我，這邊整理概要如下：\n\n```\n規格之所以會頻繁變更，大多數的原因是前期規劃不良所導致。\n\n有些 PM 甚至沒有技術背景只能當傳聲筒，在這種前提下訂出的規格往往非常模糊。\n\n而工程師面對這種模糊的規格，他有兩條路，一條路是不管那麼多，先開發再說，如果選擇這條路，那日後頻繁的遇到規格變更實屬正常。\n\n而另一條路則是「確定規格後」再開發，我們常常把沒寫測試歸咎於專案時程太緊；但其實在專案完成後做 Review 時，發現很多時候都是在白忙一場。\n\n所以如果能先把模糊的地方定義清楚，並將其納入測試程式，有時反而是在節省時間，要是日後規格有異動時，也方便確認哪一塊需要調整。\n```\n\n每個人學習新技術的理由不盡相同，但我就是在這次聊天後開始學習的。\n\n\u003e 其實有時候也不是沒時間，只是因為自己不熟悉測試程式，而用其他藉口逃避。\n\n### 二、寫測試對開發人員有哪些幫助？\n\n系統會越來越複雜，公司的同事會來來去去，不管是為了自己還是同事，有測試程式對我們最直接的幫助有：\n- **減少人工測試**：如果每次 release 新的版本就要全部手動測試一次，你絕對會崩潰。\n- **減少測試上的遺漏**：如果是人工測試，那就可能有「啊！這功能之前都沒問題，這次就不用測了」的想法，然後上線後就爆了；不過交給機器跑就不會有這個問題。\n- **避免調整程式後，一堆功能壞掉而不自知**：無論是重構程式/新增功能/解決 Bug，你勢必都會動到程式邏輯，很有可能你完成了新功能，但上線後才發現其他相依的功能壞掉了（程式也是有蝴蝶效應的）。\n- **未來的同事（自己）會感謝你**：專案可能上線後一兩年都沒事，但當需要新增/調整功能時，如果維護的人發現前人沒有測試程式，那改程式就跟走鋼索一樣（那個人很可能是自己）。\n\n### 三、筆者的學習地圖\n\n把知識集中在一篇文章會讀得太辛苦，這邊筆者將其規劃成以下主題供大家閱讀。\n\n- 認識 Jest 測試框架，開始動手寫測試程式：[連結](jest-basic/README.md)\n    - 初始化專案、設定測試環境\n    - 了解單元測試的結構，撰寫程式\n    - 了解 Jest 常用的匹配器（Matchers）\n- Jest 框架進階應用（describe、Setup and Teardown、Mock function）：[連結](jest-advanced/README.md)\n    - 測試分組（describe）\n    - 在測試前、後要執行的任務（Setup and Teardown）\n    - 用 Mock Function 減少測試時的相依性\n    - VSCode 的 Jest 外掛\n- 在 Vuetify（Vite \u0026 TypeScript）中導入單元測試 Unit Testing\n    - 初始化專案、安裝必要套件\n    - 調整專案各項設定檔，讓單元測試可以運行\n    - 撰寫第一隻測試程式\n    - 運行測試程式確認結果符合預期\n- 透過實際案例了解在 Vuetify（Vite \u0026 TypeScript）中如何運用 @vue/test-utils\n    - 從測試的角度來設計頁面規格（以登入頁為範例）\n    - 撰寫登入頁程式\n    - 從測試案例了解 @vue/test-utils 常用的功能（ex：getComponent、setValue、wrapper.vm、trigger button、Vue Router）","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean9703111%2Fjest-typescript-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdean9703111%2Fjest-typescript-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean9703111%2Fjest-typescript-starter/lists"}