Day 29 - 实战演练 — 元件单元测试

测试会用到的工具是 React Testing Library，後续对元件有改动时也可以使用 Snapshot testing。

基本上测试撰写的 SOP 就是这样：

1. 测 最基本的情况 Component 该有的要有
   • forwardRefs
   • should wrap children by popper container：Popper 的 children 会被包在一层 Popper 的 div 上
2. 测 各种 props 有没有正常显示？
   • 测 style
   • 测 element, attribute
   • 测 behavior → EX: onClick
3. 测 coverage
   • coverage 100% → 把每一行每一个 if else branch 都跑过
     1. 每个 props 都测过
     2. props 之间互相影响的分支也要测
     3. 东西有正反面的时候： T → F ; F → T 都要测
4. 测 behavior （ 就算全部都有跑到 可能在某些东西 change 的时候会有东西没 sync 好 ）
   • 如：从 controlled 切换到 uncontrolled 的时候 checked 要切换主导的人
     • 虽然正常情况是不会这样使用

而主要其实就是用 DOM API 去检查有没有相应的改变，这边要注意的是 Jest 模拟出的 DOM 渲染方式与真实 DOM 会有些不同，所以可能会踩到一些雷，但就先不在这赘述了！

以 Popper 的测试举例如下：