有比较好的前端JS TDD教程吗
我的《JS专精》视频教程是 TDD 的。但我并不认为 TDD 适合 Web 前端开发，放在库里做测试还行，放在业务里做的话，太需要经验了。自学恐怕容易迷路。
你想自学的话推荐学习 Jest。
■网友
最近写了一篇比较简单向的，不过是以React为例的，其他的框架里也已经有人写过了，希望可以帮到你。
本文首发于我的个人博客: https://teobler.com, 转载请注明出处由于篇幅所限文章中并没有给出demo的所有代码，大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程，配合文章来看会比较清晰。本文涉及的所有代码地址: teobler/TDD-with-React-hooks-demo
前端TDD的痛从进公司前认识了TDD，到实践TDD，过程中自己遇到或者小伙伴们一起讨论的比较频繁的一个问题是 — 前端不太好TDD / 前端TDD的投入收益比不高。为啥会这样呢？
我们假设你在写前端时全程TDD，那么你需要做的是 — 先assert页面上有一个button，然后去实现这个button，之后assert点击这个button之后会发生什么，最后再去实现相应的逻辑。
这个过程中有一个问题，因为前端中UI和逻辑强耦合，所以在TDD的时候你需要先实现UI，然后选中这个UI上的组件，trigger相应的行为，这个过程给开发人员增加了不少负担。
诚然，这样写出来的代码严格遵循了TDD的做法，也得到了TDD给我们带来的各种好处，但是据我观察下来，身边的小伙伴们没有一个人认同这样的做法。大家的痛点在于UI部分的TDD过于痛苦并且收益太低，而且由于UI和逻辑强耦合，后续的逻辑部分也需要先选取页面上的元素trigger出相应的执行逻辑。
这些痛点在项目组引入了hooks之后有了显著的改善，从引入hooks到现在快一年的时间，组里的小伙伴们一起总结除了一套测试策略。在此我们将React的组件分为三类 — 纯逻辑组件(比如request的处理组件，utils函数等)，纯UI组件(比如展示用的Layout，Container组件等)和两者结合的混合组件(比如某个页面)。
纯逻辑组件这部分组件没啥好说的，全都是逻辑，tasking，测试，实现，重构一条龙，具体咋写我们这里不讨论。// combineClass.test.tsdescribe(\u0026#39;combineClass\u0026#39;, () =\u0026gt; { it(\u0026#39;should return prefixed string given only one class name\u0026#39;, () =\u0026gt; { const result = combineClass(\u0026#39;class-one\u0026#39;); expect(result).toEqual(\u0026#39;prefix-class-one\u0026#39;); }); it(\u0026#39;should trim space for class name\u0026#39;, () =\u0026gt; { const result = combineClass(\u0026#39;class-one \u0026#39;); expect(result).toEqual(\u0026#39;prefix-class-one\u0026#39;); }); it(\u0026#39;should combine two class name and second class name should not add prefix\u0026#39;, () =\u0026gt; { const result = combineClass(\u0026#39;class-one\u0026#39;, \u0026#39;class-two\u0026#39;); expect(result).toEqual(\u0026#39;prefix-class-one class-two\u0026#39;); }); it(\u0026#39;should combine three class name and tail class name should not add prefix\u0026#39;, () =\u0026gt; { const result = combineClass(\u0026#39;class-one\u0026#39;, \u0026#39;class-two\u0026#39;, \u0026#39;class-three\u0026#39;); expect(result).toEqual(\u0026#39;prefix-class-one class-two class-three\u0026#39;); });});// combineClass.tsconst CLASS_PREFIX = "prefix-";export const combineClass = (...className: string) =\u0026gt; { const resultName = className.slice(0); resultName = CLASS_PREFIX + className; return resultName .join(\u0026#39; \u0026#39;) .trim();};
推荐阅读
- 为啥知乎上普便有一种【我在北上广深打工，所以拥有更好的视野】这样的错觉
- 趣头条|你我皆风华正茂，拥有广汽三菱奕歌的日子是美好的
- 在上海陆家嘴附近工作，请问去哪边租房会比较好
- 设计专业学生上传自己的作品，用哪个网站比较好
- 言论自由|
- 学的自动化却对IT比较感兴趣。。感觉对自己的专业帮助不大，好苦恼，要不要继续是专精还是学点感兴趣的?
- 大三学生准备日本留学过程中要不要准备考研
- 100W——150W有啥好的车
- 肝硬化|肝不好的人，身体有什么异常，暗示肝硬化来了？肝病怕拖，早检查
- 电话营销机器人哪个比较好用