React Speed Coding 测试完全指南Enzyme Mocha Chai 编写 React 组件 BDD 测试的 8 个技巧【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcodingReact Speed Coding 是一个包含 30 个可复用组件、15 个章节和 3 个单页应用的 React 学习项目其测试体系基于Enzyme Mocha Chai这套经典的 React 组件 BDD 测试组合。本文将结合项目中的真实测试代码拆解 8 个核心技巧带你从不会写测试到能独立完成 React 组件行为测试。 动手前建议先获取代码git clone https://gitcode.com/gh_mirrors/re/reactspeedcoding测试工具栈一览测试、Lint 与自动刷新如何协作上图展示了项目质量保障的完整链路Mocha 测试 ESLint / StyleLint 代码检查 Browsersync 浏览器自动刷新三者共同保证代码又快又稳。工具角色在项目中MochaBDD 测试运行器test/**.spec.js用例执行Chaiexpect 风格断言库expect(...).to.equal(...)EnzymeReact 组件测试工具shallow/render/mount三层渲染jsdom模拟浏览器环境browser.jssinon行为验证spy/stub01_workflow.spec.jsbabel-istanbul测试覆盖率npm run cover技巧 1一条命令跑完测试与静态检查项目的 package.json 把测试流程编排成了几条 npm 脚本这是新手最容易忽略但最实用的技巧——先约定命令再谈测试本身npm test # ESLint StyleLint Mocha 三步走 npm run test:mocha # 只跑 Mocha 组件测试 npm run cover # 生成测试覆盖率报告其中 test:mocha 的关键点在于把 test/helpers/browser.js 作为第一个参数传给 Mocha——它会在任何测试用例执行前先搭建好模拟浏览器环境见技巧 2。技巧 2用 jsdom 为 React 测试搭建浏览器环境React 组件依赖document、window、navigator这些浏览器对象而 Mocha 跑在 Node 里所以测试前必须先伪造一个浏览器。项目的做法非常干净global.document jsdom(); global.window document.defaultView; global.navigator { userAgent: node.js };完整实现见 browser.js。记住这个模式Node 环境 jsdom 注入全局对象 React 测试可用的 DOM。技巧 3用 Mocha 的 describe/it 组织 BDD 测试BDD行为驱动开发的核心是让测试读起来像需求描述。项目约定用组件名 /作为describe标题用should ...描述预期行为例如 02_mocha_chai.spec.js 就演示了三层嵌套结构describe(Mocha Chai Demo, () { describe(Array operations, () { describe(#indexOf(), () { it(should return -1 when the value is not present, () { expect([1, 2, 3].indexOf(5)).to.equal(-1); }); }); }); });另外项目还特意放了一个 Mocha 超时示例教你用this.timeout(500)调整超时时间——异步测试经常因此误报失败提前知道这个开关能省不少排查时间。技巧 4Chai expect 断言要说人话Chai 的 expect 风格支持链式调用项目里高频出现的断言模式有四种断言写法含义项目示例to.equal(值)精确相等01_workflow.spec.js 校验stepsIndex为 1to.have.length(n)数量校验02_card.spec.js 校验.card只有 1 个to.be.defined属性存在01_workflow.spec.js 校验stepsprop 已定义to.be.above(n)数量下限03_roadmap.spec.js 校验组件数量大于 2小技巧用数量断言代替全量快照列表类组件如 Roadmap数据经常变化length.above(2)比逐条比对更抗变化。技巧 5Enzyme 三层渲染按需选择测试深度这是整篇文章最值钱的技巧。Enzyme 提供三种渲染方式测试强度逐级递增上图就是项目中的 Roadmap 应用React 组件测试的实战对象它的 测试文件 同时用到了三种渲染方式shallow浅渲染只渲染被测组件一层最快适合单元测试。如 02_card.spec.js 用wrapper.is(.card)校验根节点类名render静态 HTML输出真实 DOM适合校验整棵子树的最终结构。如 03_roadmap.spec.js 校验.search-filter存在mount完整挂载带状态、带事件的全量渲染适合测试交互行为见技巧 6、7。经验法则先 shallow不够再 mount能跑快的测试跑得越快整个套件就越稳。技巧 6simulate 模拟用户点击测试交互状态静态渲染只能证明组件画出来了真正的行为测试要模拟用户操作。Workflow 组件测试 展示了标准套路——渲染 → 触发事件 → 断言状态变化const wrapper mount(Workflow /); wrapper.find(button.default).simulate(click); expect(wrapper.state(stepsIndex)).to.equal(1);被测试的 Workflow 组件 点击按钮后应把stepsIndex从 0 递增到 1测试精确验证了这一点。还有一招wrapper.setState({ stepsIndex: 1 })可以先手动设置初始状态再触发用于测试第 N 次点击这类依赖前置状态的场景。技巧 7用 sinon.spy 验证方法被调用了有时你不关心方法内部逻辑那些逻辑另有单元测试只关心它是否被触发。项目用 sinon 做了教科书式的演示见 01_workflow.spec.jssinon.spy(Workflow.prototype, cycleScenario); const wrapper mount(Workflow /); expect(Workflow.prototype.cycleScenario.calledOnce).to.equal(false); // 点击前没调用 wrapper.find(button.primary).simulate(click); expect(Workflow.prototype.cycleScenario.calledOnce).to.equal(true); // 点击后调用了调用前断言一次、调用后再断言一次——这种前后对照写法能彻底排除假阳性是行为验证的推荐姿势。技巧 8测试 Redux Store用空测试当 TODO 清单Roadmap 是项目里最复杂的 Redux 单页应用测试分两部分① 组件测试需要 Provider 包裹。React Redux 组件必须拿到 store 才能渲染项目用 roadmapHydrate 预填充数据后再用Provider store{store}包住组件见 03_roadmap.spec.js。② 独立测试状态树。不渲染任何组件直接dispatchaction 验证 state 变化如 setCategoryFilter 与 setSearchText 测试。③ 留白即 TODO。Mocha 允许只写it(...)不写函数体测试会以待办状态列出。项目大量使用这一招例如 03_roadmap.spec.jsit(should execute onChange() when user presses key in search box); it(should update state tree after onChange() is called in search field);这让测试文件同时成为验收清单新接手的人一眼就知道还欠哪些测试。8 个技巧速查清单#技巧关键命令/写法参考文件1一键跑测试Lintnpm testpackage.json2jsdom 模拟浏览器global.document jsdom()browser.js3BDD 结构组织describe/it/this.timeout02_mocha_chai.spec.js4expect 断言模式equal/length/defined/above01_workflow.spec.js5Enzyme 三层渲染shallow→render→mount03_roadmap.spec.js6模拟交互simulate(click)state()断言01_workflow.spec.js7行为验证sinon.spycalledOnce前后对照01_workflow.spec.js8Redux 测试与 TODOProvider包裹 空it占位03_roadmap.spec.js 总结React 组件测试的黄金路径就是jsdom 铺路 → shallow 快测 → mount 测交互 → sinon 验行为 → 空 it 记 TODO。照着这 8 个技巧你就能为任何 React 组件写出既快又可维护的 BDD 测试。【免费下载链接】reactspeedcoding:rocket: Learn React with 30 reusable components, 15 chapters, and 3 single page apps. Fast start project with JavaScript ES6. React Hot Loading. React Router. Redux. PostCSS, FlexBox styling. Firebase database. Webpack packaging. Enzyme, Mocha, Chai BDD testing. ESLint and StyleLint. Browsersync.项目地址: https://gitcode.com/gh_mirrors/re/reactspeedcoding创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考