如何为排序面板组件写E2E测试react-sortable-pane的StorybookCypress实战【免费下载链接】react-sortable-pane:sparkles: A sortable and resizable pane component for React.项目地址: https://gitcode.com/gh_mirrors/re/react-sortable-pane本文将带你用react-sortable-pane一个支持拖拽排序与缩放的 React 面板组件的真实开源项目作为范本完整演示如何为排序面板组件编写 E2E 测试使用Storybook提供可复现的 UI 场景再用Cypress模拟真实拖拽并断言结果。哪怕你第一次接触 E2E 测试也能照着做出自己的第一套测试。为什么选择 Storybook Cypress 测试方案 排序面板的核心交互是「鼠标拖拽」这类测试很难用单元测试覆盖必须走 E2E在一个真实浏览器里把组件跑起来模拟用户的鼠标动作再检查最终状态。react-sortable-pane 的做法非常聪明分工明确工具角色解决什么问题Storybook场景提供者把组件的各种用法水平/垂直排序、受控/非受控、回调等做成一个个可点的故事保证测试对象可复现Cypress行为模拟器打开 Storybook 页面模拟 mousedown / mousemove / mouseup断拽拽后面板的变换位置所有场景都集中在 stories/index.tsx 中定义比如最基础的Basic (uncontrolled)组里就有vertical和horizontal两个故事——这正是 E2E 测试要操作的目标。一键启动最快跑通全套 E2E 测试 ⚡拿到代码后仓库地址https://gitcode.com/gh_mirrors/re/react-sortable-pane git clone后执行yarn install安装依赖只需一条命令npm test打开 package.json 看看这条命令背后的编排test: concurrently npm run storybook npm run cypress:test -k -s first, cypress:test: wait-on http-get://localhost:6096 npm run cypress:run拆开看只有三步非常值得借鉴concurrently并行启动 Storybook 开发服务器端口 6096和 Cypress 测试流程wait-on先轮询http://localhost:6096等 Storybook 真正就绪后才放行——这是防止测试跑得比页面还快这一经典故障的关键cypress run以无头模式批量执行所有用例。开发调试时更推荐npm run cypress:open它会弹出 Cypress 的可视界面你能逐帧看到鼠标事件的模拟过程对新手极其友好。测试目录结构四个关键文件各司其职 cypress/ ├── integration/simple/ # E2E 测试用例 │ ├── horizontal.ts # 水平排序拖拽测试 │ └── vertical.ts # 垂直排序拖拽测试 ├── fixtures/story.js # 存放 Storybook 地址等测试数据 ├── plugins/index.js # 用 webpack ts-loader 预处理 TS 测试文件 ├── support/ # 全局导入的辅助命令 └── ... cypress.json # Cypress 配置本项目为空对象全走默认值几个值得学习的细节测试数据外置cypress/fixtures/story.js 只有一行exports.storyUrl http://localhost:6096用例通过require引入。将来端口变了只改一处即可TypeScript 支持Cypress 原生不支持 TScypress/plugins/index.js 里注册了cypress/webpack-preprocessor插件用ts-loader把cypress/目录下的.ts/.tsx文件先编译再执行——所以你可以直接写iget(doc, selector)这样带类型的辅助函数support 文件cypress/support/index.js 会在每个测试文件加载前自动执行适合放全局配置或自定义命令。核心技巧在 Cypress 中模拟真实拖拽 ️这是全文最值得抄的部分。以 cypress/integration/simple/horizontal.ts 为例整个用例不到 30 行beforeEach(() { cy.visit(storyUrl); }); it(should sort horizontal pane, () { selectStory(horizontal); cy.get(#storybook-preview-iframe).then($iframe { const doc $iframe.contents(); iget(doc, .pane0).trigger(mousedown, { which: 1 }); iget(doc, body).trigger(mousemove, { clientX: 200, clientY: 0 }); iget(doc, .pane0).trigger(mouseup, { force: true }); iget(doc, .panes div).eq(0) .and(have.css, transform) .and(match, /matrix\(1, 0, 0, 1, 140, 0\)/); cy.screenshot(horizontal); }); });逐行拆解四个关键动作选择故事selectStory(horizontal)实际是点击 Storybook 左侧菜单的链接a[data-namehorizontal]让预览区切换到目标场景钻入 iframeStorybook 的预览内容渲染在#storybook-preview-iframe里必须用$iframe.contents()拿到 iframe 内部的 DOM 才能操作模拟拖拽三件套在.pane0上依次触发mousedown按下→ 在 body 上mousemove到目标坐标拖动→mouseup并加{ force: true }抬起force用于绕过元素遮挡的可见性检查断言 留证检查拖拽后面板的transform样式是否变成预期的matrix(1, 0, 0, 1, 140, 0)即向右移动了 140px再用cy.screenshot截图归档方便肉眼复核。垂直方向的 vertical.ts 逻辑完全对称只是把clientX: 200换成了clientY: 200断言位移方向随之变化。四步扩展你自己的 E2E 用例 ✍️想测「缩放面板」「受控模式回调」等其他场景项目里现成的故事都在 stories/index.tsx 中比如Controlled、Callbacks、Add Remove组。新用例照下面四步走加故事若被测场景不存在参考 stories/simple/horizontal.tsx 新增一个 story给 Pane 加上稳定的 className 如pane0方便定位写骨架在cypress/integration/下新建 specbeforeEach里cy.visit(storyUrl)模拟操作照抄「拖拽三件套」按需调整坐标或事件顺序例如测试缩放就触发边缘手柄上的鼠标事件断言状态优先断言数据层如transform、onOrderChange回调收到的顺序数组比断言像素更稳定。新手避坑清单 ✅等待要显式一定要用wait-on之类的机制等页面就绪否则 CI 上偶发页面没加载完就开测的假失败iframe 要显式钻入不先取$iframe.contents()就cy.get会报找不到元素——这是新手在 Storybook 场景下最常踩的坑截图是廉价的保险每条用例末尾的cy.screenshot几乎不花时间却能在 CI 失败时让你一眼定位问题测试与手动调试双通道cypress run上 CIcypress open供本地调试两个 script 都保留在项目里见 package.json 的scripts字段。小结为排序面板组件写 E2E 测试的黄金公式是——Storybook 负责把 UI 场景摆出来Cypress 负责像用户一样操作并验收。react-sortable-pane 这套不到百行的测试基建结构清晰、可复制性极强直接搬去你自己的 React 组件项目也完全适用。【免费下载链接】react-sortable-pane:sparkles: A sortable and resizable pane component for React.项目地址: https://gitcode.com/gh_mirrors/re/react-sortable-pane创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考