用React hooks实现TDD

本文首发于我的个人博客: 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.ts
describe('combineClass', () => {
    it('should return prefixed string given only one class name', () => {
        const result = combineClass('class-one');