{"id":13495112,"url":"https://github.com/haixiangyan/jest-tutorial","last_synced_at":"2025-04-12T20:44:40.976Z","repository":{"id":37653591,"uuid":"484965391","full_name":"haixiangyan/jest-tutorial","owner":"haixiangyan","description":"🃏《Jest 实践指南》","archived":false,"fork":false,"pushed_at":"2023-08-29T13:47:14.000Z","size":16147,"stargazers_count":785,"open_issues_count":12,"forks_count":62,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-04T00:08:35.305Z","etag":null,"topics":["frontend","jest","testing","tutorial"],"latest_commit_sha":null,"homepage":"https://github.yanhaixiang.com/jest-tutorial/","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/haixiangyan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-04-24T08:10:22.000Z","updated_at":"2025-03-09T10:15:13.000Z","dependencies_parsed_at":"2024-01-14T04:44:08.995Z","dependency_job_id":"cbf77a32-bf25-4be6-925b-1e38cc72c7b9","html_url":"https://github.com/haixiangyan/jest-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haixiangyan%2Fjest-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haixiangyan%2Fjest-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haixiangyan%2Fjest-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/haixiangyan%2Fjest-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/haixiangyan","download_url":"https://codeload.github.com/haixiangyan/jest-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631687,"owners_count":21136556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["frontend","jest","testing","tutorial"],"created_at":"2024-07-31T19:01:31.299Z","updated_at":"2025-04-12T20:44:40.951Z","avatar_url":"https://github.com/haixiangyan.png","language":"Shell","readme":"# 🃏《Jest 实践指南》\n\n[![Coverage Status](https://coveralls.io/repos/github/haixiangyan/jest-tutorial-example/badge.svg?branch=main)](https://coveralls.io/github/haixiangyan/jest-tutorial?branch=main)\n![](https://visitor-badge.glitch.me/badge?page_id=jest-tutorial)\n\n\u003cimg src=\"./cover.jpeg\" width=\"300\"/\u003e\n\n* [《Jest 实践指南》访问链接](https://github.yanhaixiang.com/jest-tutorial/)\n* [《Jest 实践指南》配套项目](https://github.com/haixiangyan/jest-tutorial-example)\n\n## 前言\n\n[Jest](https://jestjs.io/) 看似很简单，就像很多博客写的那样：\n\n```js\nexpect(sum(1, 1)).toEqual(2)\n```\n\n然而在真实业务中，写出一个好测试的难度并没有大家想的那么低。我总结了一下写测试的几个难点：\n\n**不会配置。** Jest 的上手文档非常简单，甚至不需要配置。但真实情况是只要一个配置没配好，所有测试都跑不起来。测试不像开发，代码有问题可以慢慢调。\n测试是一个 0 - 1 游戏，不是成功就是失败，挫败感非常强。\n\n**不知道要怎么 Mock。** 这个绝对是经典中的经典。虽然官方文档有教程，但是真实的业务往往不是那么理想，远比文档要复杂的多。\n\n**不会构造测试用例。** 刚接触测试时，很容易把做业务那套 “实现 XXX 功能” 的想法代入测试。但测试的重点不在于实现功能，而是构造用例。\n\n**没有测试策略。** 上面是 “技” 的难点，测试还有 “术” 的难点。闷着头一通肝测试代码并不高效，使用合适的测试策略远比写 10 个测试用例重要。\n\n上面这些问题很容易让人写出难以维护和复杂的测试。只要业务一改，不仅要维护业务代码还要维护测试代码。\n这时，你不禁感叹：“测试真浪费时间”，最终放弃写测试，直接开摆。\n\n**好的测试会让你获得很高的代码信心，而不好的测试则会严重拖垮项目开发。所以，大家所厌恶的不应该是测试本身，而是那些维护性差的测试。**\n\n## 目的\n\n我在网上翻找关于前端测试的资料时，我发现真的太少了，几乎可以分为几类：\n\n1. **入门类。** 安装 Jest，外加 `expect(1 + 1).toEqual(2)` 小例子\n2. **API 说明书类。** 类似于把 Jest 官网抄了一遍\n3. **理论类。** 是什么、为什么、测试分类等，但最重要的 “怎么做” 没有说\n\n并不是说这些文章不好，只是，这些文章大多数停留在最初级，很不利于其他同学来学习一门新技术。\n\n同时，我还拜访了一下 [Jest 的官网](https://jestjs.io/zh-Hans/) 。没想到，都 2022 年了，中文翻译依然这么难看：\n\n![](./docs/bad-translation.png)\n\n先不说翻译的正确性如何，单看这中文的内容就让人没有想看下去的欲望，真希望 Jest 能找稍微专业一点的人来做翻译。\n由于官网的中文翻译做的实在太烂，遇到问题几乎在中文社区是找不到的。\n\n终于，我看到了 React Testing Library 作者 Kent C. Dodds 的 [博客](https://kentcdodds.com/) 。\n\n![](./docs/kentcdodds.png)\n\n他写了很多关于测试思路的文章，每一篇都非常精彩。**受他的启发，我觉得有必要把这些思想和技巧分享出来，最终形成了这本小书。**\n\n\n## 内容\n\n\u003e 此次教程主要分享测试的思路为主，虽然以 React 为主要技术栈，但使用其它技术栈的读者依然可以流畅阅读。\n\n**本教程是我结合了自身实践、Kent C. Dodds 文章、StackOverflow、Github Issue 以及别的博客最终总结出来的一套实践指南。**\n\n小书包含 3 部分：\n\n**基础实践。** 从 0 到 1 写项目和测试，每一章会通过一个业务例子来分享测试难点、解法和思路。\n\n**测试思路。** 分享一些 Kent 的文章（中文翻译）以及测试总结。\n\n**[配套项目](https://github.com/haixiangyan/jest-tutorial-example)。** 如果你在某一步卡壳了，也可以参考这个项目。\n\n最近给这个 Repo 开了一个 [讨论区](https://github.com/haixiangyan/jest-tutorial/discussions) ，如果你有任何问题（Jest、测试、小书）\n，都可以在这里一起讨论 😄。\n\n## 求关注\n\n**这教程 + 配套项目写了 3 周，说实话挺累的。原创不易，打赏就不必了，观众老爷省着吧。只求大家多关注一下我的新公众号【写代码的海怪】。**\n\n![](./docs/qrcode.gif)\n","funding_links":[],"categories":["Shell","Test"],"sub_categories":["PHP"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaixiangyan%2Fjest-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhaixiangyan%2Fjest-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhaixiangyan%2Fjest-tutorial/lists"}