TypeScript + preact + enzyme + 单元测试 = 灾难
因为 preact 相对于 react 更小巧,因此本站的评论系统所使用的是 TypeScript + preact 的解决方案。
近期因为想试试写一些单元测试,踩了一大堆的坑后发现填坑要花费的时间太长,最后放弃给这个小项目写单元测试了。
企业级的项目还是推荐上 react
,这方面的单元测试文档相对来说更丰富,差错也容易。
坑
根据 preact 的官方文档,单元测试可以利用 enzyme 来辅助测试。
enzyme 框架是一个通用的 React 单元测试辅助框架,可以虚拟挂载 React 组件到一个虚拟 DOM 上。这个的类型库是 @types/enzyme
,其中会引入 @types/react
。
以此为背景,现在可以来看看类型冲突的问题了。
首先需要明白一点——虽然 react
和 preact
的导出 API 有很多互相兼容的地方,但是内部实现却大相径庭。如果你在引入了 preact
的时候还引入了 @types/react
,那么你的 IDE 或编辑器(若支援)则会在一些地方报错,比如提示引入的 preact-markup
库的返回类型是 VNode<any>
不兼容 JSX Element
类型。
更加难受的是,你还不能直接把类型库里引入的 react
替换成 preact
——你得对 react
和 preact
的内部实现都有一定理解才能将其替换成一个等价的类型库。
相关思考
enzyme
的类型库有大量依赖 React 的地方,而非直接使用的内部接口,导致耦合性过高,和preact
产生冲突。- 装了一大堆的包,浪费时间。
- 这种小品级别的项目究竟有没有必要做单元测试呢?