企业官网建设流程全解析

react-kanban 测试策略解密:如何用 Jest 实现 100% 覆盖率的单元测试

【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanban

react-kanban 是一款基于 React 的看板（Kanban/Trello）组件库，它以"100% 测试覆盖率"作为核心卖点，在 README 中直接打出了Reliable: 100% tested on CI; 100% coverage的口号。本文将从 jest.config.js 配置、纯函数测试、组件测试和拖拽模拟四个层面，为你完整解密 react-kanban 如何用 Jest 打造 100% 覆盖率的单元测试体系。

一、认识 react-kanban：为测试而生的看板组件库 📋

react-kanban（GitHub 加速计划 / reac 组织下的镜像项目）是一个轻量、可插拔的看板组件库，支持卡片拖拽、列拖拽、增删改卡片等完整能力，且同时支持受控（Controlled）和非受控（Uncontrolled）两种模式。

它的测试体系分为两层：

单元测试就是撑起"100% 覆盖率"的主力，全部测试文件与源码同目录存放，遵循*.spec.js命名规范：

• helpers.spec.js —— 看板操作函数测试
• utils.spec.js —— 数组工具函数测试
• Board/index.spec.js —— 看板组件测试

二、一键运行测试：Jest 配置解密 ⚙️

在 package.json 中，一行"test": "jest"就能启动全部单元测试。而真正决定测试行为的是根目录的 jest.config.js，几个关键配置值得学习：

module.exports = { collectCoverage: true, // 每次运行自动收集覆盖率 collectCoverageFrom: ['src/**', '!src/index.js'], // 统计 src 下所有源码 testMatch: ['<rootDir>/src/**/*.spec.js'], // 测试文件位置 testRunner: 'jest-circus/runner', // 现代测试运行器 }

三个值得抄的配置技巧

1. collectCoverageFrom 精确圈定范围：只统计src/**下的真实源码，通过!src/index.js排除入口文件（它只是 re-export，无业务逻辑），避免覆盖率被"注水"。
2. moduleNameMapper 路径别名：将@services/*、@components/*映射到真实目录，测试代码更简洁；同时用identity-obj-proxy把.scss样式文件 mock 掉，让测试无需关心样式。
3. setupFilesAfterEnv 注入断言库：引入@testing-library/jest-dom/extend-expect，让toBeInTheDocument()这类 DOM 断言开箱即用。

💡 覆盖率报告生成在coverage文件夹，可用open coverage/lcov-report/index.html查看 HTML 可视化报告。

三、第一层：纯函数测试——用 describe/it 铺满每一条分支 🧪

看板的核心逻辑是对数据结构的操作，react-kanban 把这些操作全部抽成了纯函数，集中在 src/services/helpers.js：

• moveColumn/moveCard：移动列和卡片
• addColumn/removeColumn/changeColumn：增删改列
• addCard/removeCard/changeCard：增删改卡片

这些函数不改动原 board，而是返回新对象，天然适合单元测试。以 helpers.spec.js 为例，测试采用describe → it分层结构：

describe('#moveCard', () => { describe('when the card is moved in the same column', () => { it('returns a board with the card moved to the specified position', () => { const board = { columns: [{ id: 1, cards: [{ id: 1 }, { id: 2 }, { id: 3 }] }] } const result = moveCard(board, { fromPosition: 0, fromColumnId: 1 }, { toPosition: 2, toColumnId: 1 }) expect(result).toEqual({ columns: [{ id: 1, cards: [{ id: 2 }, { id: 3 }, { id: 1 }] }] }) }) }) })

实现 100% 覆盖率的核心手法

• 按行为分支拆 describe：moveCard拆成"同列移动"与"跨列移动"两组用例，确保if/else两条路径都被执行；
• 用toEqual断言完整结果：不仅验证返回值，还验证 board 结构的完整性，防止副作用污染；
• 底层工具函数单独测试：utils.js 中的addInArrayAtPosition、removeFromArrayAtPosition、changeElementOfPositionInArray等数组操作被 utils.spec.js 逐个覆盖，为上层函数打好地基。

四、第二层：组件测试——用 Testing Library 模拟真实交互 🎭

纯函数测试之后，react-kanban 用@testing-library/react对组件进行渲染与交互测试，核心文件是 src/components/Board/index.spec.js，这一份文件就超过 1800 行，几乎覆盖了 Board 组件的全部 props 组合。

受控与非受控双模式测试

Board 组件根据initialBoard是否存在，分流到UncontrolledBoard或ControlledBoard（见 src/components/Board/index.js）。测试也严格对应两种模式各测一遍：

function ControlledBoard({ children, ...props }) { const [board, setBoard] = useState(children) return <Board {...props}>{board}</Board> }

• 受控模式：验证renderCard、renderColumnHeader等自定义渲染函数收到的参数是否正确；
• 非受控模式：验证用户操作后onCardDragEnd回调收到的modified board是否符合预期（用完整对象toEqual断言）。

用户故事式的交互测试

测试用例完全按照用户操作路径书写：点击 ➕ 添加列 → 输入标题 → 点击 Add → 断言onNewColumnConfirm被调用且参数正确；点击 × 删除列/卡片 → 断言回调触发。这种"行为驱动"写法让测试既是回归保障，又是组件文档。

五、第三层：拖拽模拟——手动 Mock 的巧思 🐉

看板组件最难的测试点是拖拽，因为真实拖拽依赖鼠标事件和动画。react-kanban 的解法非常巧妙：在根目录的__mocks__/下提供了 react-beautiful-dnd.js 手动 Mock。

这个 Mock 做了两件事：

1. 把DragDropContext、Droppable、Draggable替换成直接渲染 children 的轻量组件（Droppable还会渲染一个#placeholder占位符）；
2. 暴露一个全局callbacks对象，把onDragEnd存进去，测试里可以直接手动触发：

import { callbacks } from 'react-beautiful-dnd' callbacks.onDragEnd({ source: { droppableId: '1', index: 0 }, destination: { droppableId: '1', index: 1 }, })

这样测试就能绕过真实拖拽，直接注入拖拽结束事件，覆盖"取消拖拽不回调"、"原地拖拽不回调"、"移动到新位置回调参数正确"等边界场景，做到低成本、高确定性地测试交互逻辑。

💡 提示：Jest 中要启用手动 Mock，需要在 jest.config.js 中配置moduleNameMapper或使用jest.mock()，react-kanban 通过__mocks__目录加测试文件内导入的配合实现了无缝替换。

六、端到端测试与覆盖率收尾 🔗

单元测试之外，react-kanban 还用 Cypress 做端到端测试（见 cypress/integration/board.spec.js），并且通过@cypress/code-coverage收集 E2E 覆盖率，与单元测试合并统计，最终实现整体 100% 覆盖。

这里有一个防止重复插桩的细节值得注意：在 babel.config.js 中，babel-plugin-istanbul只被配置在cypress环境（NODE_ENV=cypress）下启用，因为 Jest 自带的覆盖率插桩已经覆盖了单元测试，避免同一个文件被插桩两次。

运行方式：

# 单元测试（生成 coverage 目录） yarn test # E2E 测试 yarn dev

七、总结：100% 覆盖率不是玄学 ✨

回看 react-kanban 的整套测试策略，实现 100% 覆盖率的路径清晰可复制：

1. 逻辑与 UI 分离：把看板增删改查抽成纯函数，测试成本极低；
2. 按分支穷举测试：describe按行为分支拆分，it覆盖每条路径；
3. 受控/非受控双测：同一交互逻辑在两种模式下都验证；
4. Mock 掉复杂依赖：用轻量组件替换拖拽库，手动触发回调，绕开环境难题；
5. CI 强制校验：README 强调 "100% tested on CI"，让覆盖率成为发布红线。

如果你也想给自己的 React 组件库建立高覆盖率测试体系，直接对照 react-kanban 的 jest.config.js、helpers.spec.js 和 react-beautiful-dnd.js 这三个文件动手实践，就是最好的起点。

【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanban