使用 Mocha 测试 React 组件：enzyme 实战指南

测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载本文基于 enzyme 官方文档 docs/guides/mocha.md结合仓库内置示例项目 enzyme-example-mocha 的源码系统讲解如何在 Mocha 测试框架中安装、配置并使用 enzyme 对 React 组件进行单元测试。读完本文你将掌握 enzyme Mocha Chai Sinon 的完整测试套路包括断言断言组件生命周期、渲染结果与 DOM 结构并了解 adapter 配置与 Babel/JSX 编译的关键细节。enzyme 与 Mocha天然契合的测试组合enzyme 在设计之初就是以 Mocha 为主要服务对象的测试工具。官方文档明确指出enzyme was originally designed to work with Mocha, so getting it up and running with Mocha should be no problem at all.这意味着 enzyme 对 Mocha 的运行环境Node jsdom 或浏览器 DOM做了充分的适配不需要任何特殊的插件、mock 或垫片即可直接工作——装好依赖、引入函数即可开测。这也解释了为什么 enzyme 官方文档中的绝大多数示例shallow、mount、render 的用法都以 Mocha BDD 风格的 Chai 断言演示见 docs/installation/README.md。第一步安装依赖在项目根目录执行npm i --save-dev enzyme这只是最小安装。要完整跑起来还需要 React、react-dom、Mocha 本身以及断言库。仓库中的示例项目 packages/enzyme-example-mocha/package.json 给出了一个可直接照搬的依赖清单{ devDependencies: { babel/core: ^7.28.4, babel/cli: ^7.28.3, mocha: ^3.5.3, jsdom: ^11.5.1, nyc: ^11.4.1 }, dependencies: { chai: ^4.3.4, enzyme: ^3.3.0, enzyme-adapter-react-16: ^1.1.1, react: ^16.2.0, react-dom: ^16.2.0 } }要点说明enzyme 本身不依赖任何测试框架它只是一个提供shallow/mount/render等 API 的工具库docs/installation/README.md 明确说明 neither library is a dependency of enzyme需要与 React 版本匹配的 adapter例如 React 16 使用enzyme-adapter-react-16。React 16 的完整安装流程见 docs/installation/react-16.mdnpm i --save react16 react-dom16 npm i --save-dev enzyme enzyme-adapter-react-16jsdom提供浏览器 DOM 环境供mount全渲染需要真实 DOM使用babel/register/babel/core用于在测试中实时转译 JSX 与 ES 模块语法。第二步配置 enzyme Adapterenzyme v3 起必须通过configure({ adapter })指定适配器。推荐的做法是把这段配置放进一个测试 setup 文件在 Mocha 启动时统一加载。仓库示例 src/Foo.spec.jsx 展示了最直接的写法在测试文件顶部配置import React from react; import Enzyme, { shallow, mount } from enzyme; import Adapter from enzyme-adapter-react-16; import { expect } from chai; import Foo from ./Foo; Enzyme.configure({ adapter: new Adapter() });如果希望所有测试文件共享这一配置可以把上面三行Enzyme.configure抽到独立的 setup 文件中再通过 Mocha 的--require在运行前加载。参考官方安装文档docs/installation/react-16.mdsetup 文件的 ES6 写法为// setup 文件 import { configure } from enzyme; import Adapter from enzyme-adapter-react-16; configure({ adapter: new Adapter() });在 React 16 环境下测试文件只需直接引入 API// 测试文件 import { shallow, mount, render } from enzyme; const wrapper shallow(Foo /);第三步编写你的第一个 enzyme 测试官方指南 docs/guides/mocha.md 给出了一个完整的“最小可用”示例它同时演示了 enzyme 的mountAPI 与 Sinon 的 spy 机制——用于断言组件的生命周期方法是否被正确调用import React from react; import { expect } from chai; import { mount } from enzyme; import { spy } from sinon; import Foo from ./src/Foo; spy(Foo.prototype, componentDidMount); describe(Foo /, () { it(calls componentDidMount, () { const wrapper mount(Foo /); expect(Foo.prototype.componentDidMount).to.have.property(callCount, 1); }); });这段代码的要点spy(Foo.prototype, componentDidMount)先用 Sinon 在组件原型的componentDidMount方法上挂一个 spy记录其调用情况mount(Foo /)执行完整挂载React 生命周期真实触发——因此componentDidMount会被调用恰好 1 次expect(...).to.have.property(callCount, 1)用 Chai 的 BDD 风格断言验证 spy 的callCount属性。注意对类组件才可以使用Foo.prototype进行 spy对函数组件应改用其他方式如useEffect的副作用验证断言行为。仓库内完整示例enzyme-example-mocha为了让读者有可运行的参照仓库内置了示例项目 enzyme-example-mocha项目描述为 Example project with React Enzyme Mocha。其源码结构如下packages/enzyme-example-mocha/ ├── src/ │ ├── Foo.jsx # 被测组件 │ └── Foo.spec.jsx # 测试用例 ├── test/ │ └── mocha.opts # Mocha 启动参数 ├── package.json └── README.md被测组件 src/Foo.jsx 非常简单import React from react; const Foo () div classNamefoo /; export default Foo;对应的测试 src/Foo.spec.jsx 同时演示了shallow与mount两种渲染方式下的常见断言import React from react; import Enzyme, { shallow, mount } from enzyme; import Adapter from enzyme-adapter-react-16; import { expect } from chai; import Foo from ./Foo; Enzyme.configure({ adapter: new Adapter() }); describe(A suite, () { it(contains spec with an expectation, () { expect(shallow(Foo /).contains(div classNamefoo /)).to.equal(true); }); it(contains spec with an expectation, () { expect(shallow(Foo /).is(.foo)).to.equal(true); }); it(contains spec with an expectation, () { expect(mount(Foo /).find(.foo).length).to.equal(1); }); });三个用例分别覆盖了 enzyme 的高频能力API 用法作用对应 enzyme 方法shallow(Foo /).contains(div classNamefoo /)断言浅渲染输出中包含某元素containsshallow(Foo /).is(.foo)断言根节点匹配某选择器ismount(Foo /).find(.foo).length全渲染后按选择器查找节点并计数find用 mocha.opts 统一测试运行配置示例项目通过 test/mocha.opts 为 Mocha 提供启动参数--require test/.setup.js --compilers js:babel/register含义如下--require test/.setup.js运行前先加载 setup 文件用于配置 enzyme adapter、设置 jsdom 全局环境等使所有测试共享同一初始化逻辑--compilers js:babel/register用 Babel 实时编译 JS/JSX 文件使测试代码中的 ES 模块语法与 JSX 可以直接运行。兼容性提示--compilers是 Mocha 3.x 时代的参数在 Mocha 4 中已被移除改用 Babel 生态的--require babel/register或babel/register配合.babelrc完成转译。示例项目锁定 Mocha^3.5.3见 package.json因此沿用旧语法。若使用新版 Mocha请相应调整。对应的 npm scriptspackage.jsonscripts: { pretest: npm run lint, test: nyc mocha src/*.spec.js*, test-watch: npm test -- --watch }npm test先 lint 再运行nyc mocha src/*.spec.js*nyc用于生成代码覆盖率npm run test-watch进入 watch 模式文件变更时自动重跑测试。运行与验证在示例项目目录下执行npm install npm test即可看到 Mocha 输出的测试结果与覆盖率报告。如果你想在自己的 React 项目中复刻这一套配置只需要四步安装依赖enzyme adapter react react-dom mocha chai jsdom babel创建 setup 文件调用Enzyme.configure({ adapter: new Adapter() })通过mocha.opts或新版 Mocha 的命令行参数指定 setup 文件与 Babel 编译在测试文件中import { shallow, mount } from enzyme并编写断言。小结enzyme 从诞生起就面向 Mocha 设计二者组合零额外配置、即插即用安装时务必根据 React 版本选择配套 adapter如 React 16 →enzyme-adapter-react-16测试前先Enzyme.configure({ adapter })可通过 setup 文件统一完成shallow、mount、render分别适合浅渲染、全渲染与静态 HTML 渲染场景配合 Chai 断言与 Sinon spy可以覆盖组件渲染结果与生命周期行为的全部验证需求。赞分享测试前端【免费下载链接】enzymeJavaScript Testing utilities for React项目地址https://gitcode.com/gh_mirrors/en/enzyme点击查看免费下载相关推荐wger前端组件测试使用Enzyme测试健身React组件wger前端组件测试使用Enzyme测试健身React组件 wger作为一款开源自托管的健身追踪应用正逐步引入React组件来提升用户体验。本文将详细介绍如后端医疗健康ReactJS101测试驱动开发Mocha与Enzyme实战指南ReactJS101测试驱动开发Mocha与Enzyme实战指南 ReactJS101是一本从零基础开始学习React.js的中文入门教程涵盖React生态后端企业应用Enzyme测试实战从零构建React组件测试体系Enzyme测试实战从零构建React组件测试体系 你是否还在为React组件测试而烦恼是否觉得组件交互逻辑难以验证本文将带你从零开始使用Enzyme构测试前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考