在现代 Web 开发中,React 已经成为了非常常用的一种技术,以其高效的性能和易于维护的组件化架构,使得我们能够更加轻松地开发出复杂的前端应用。不过开发好的组件也需要进行测试,毕竟前端业务的复杂度正在不断提高,我们需要保证各种情况下的正确性和稳定性。而 Enzyme 是 React 的一个测试库,它能够帮助我们在组件化开发中进行更加有效和精准的测试。
Enzyme 的基本用法
Enzyme 是由 Airbnb 前端团队开发的 React 测试库,使用它进行组件测试非常方便,它提供了类似于 jQuery 的链式调用形式,使得我们能够非常方便地进行单元测试、组件测试、集成测试等多种测试。首先,我们需要使用 npm 或者 yarn 安装 Enzyme:
npm install enzyme --save-dev
然后就可以在我们的测试文件中使用 Enzyme 来对 React 组件进行测试。例如,假设我们编写了一个计数器组件:
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- ----- ------- ------- --------------- - ------------------ - ------------- ---------- - - ------ -- -- - -------- - ------ - ------- ----------- -- --------------- ------ ---------------- - - ---- ------------------ --------- -- - -
现在我们想要对这个组件进行测试。首先我们需要引入 Enzyme:
import Enzyme, { shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
然后,我们就可以使用 shallow
方法来对该组件进行测试:
it('renders correctly', () => { const wrapper = shallow(<Counter />); expect(wrapper).toMatchSnapshot(); });
上述代码以 Jest 测试框架为例,使用 shallow
方法对 <Counter>
组件进行测试,判断是否与预期 snapshot
相符。
Enzyme 测试的注意事项
Enzyme 和 Jest 配置
使用 Enzyme 进行 React 组件测试需要进行 Jest 配置。在项目根目录下新建 jest.config.js
文件,并进行相应配置:
-- -------------------- ---- ------- -------------- - - ----------- ----- ------------------ ----------- --------------------- ------ ------ ----- ------- ----------------- - ----------- ------------------- -- ------------------- ----------------------------- ---------------- -------- ---------- - -------------------------------------------- ------------------------------------------ -- ---------- - ------------------------- ------------- -- ------------------------ ---------------------------- -------- ----- --
在 setupFilesAfterEnv
中引入 Enzyme:
// tests/setup.js import Enzyme from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
在测试代码中引入 Enzyme:
import Enzyme, { shallow } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; Enzyme.configure({ adapter: new Adapter() });
Enzyme 的选择器
和 jQuery 类似,Enzyme 也提供了选择器的概念,可以通过选择器来选取组件进行测试。Enzyme 支持以下三种选择器:
shallow
:浅渲染组件,不渲染其子组件。mount
:完整渲染组件,包括其子组件。render
:渲染静态 HTML,产生一个正常的 HTML 字符串。
在实际开发中,我们推荐使用 shallow
和 mount
,因为它们能不同程度地模拟测试环境,更为接近实际业务的场景。
Enzyme 的匹配器
在测试时,Enzyme 与 Jest 配合使用,我们可以使用 Jest 的断言函数来进行测试。这种方式可以让我们进行更加精准和灵活的测试。Enzyme library 提供了如下的匹配器:
toBe
: 精确匹配,使用===
运算符。toEqual
: 深度匹配,会检查对象的所有属性和子属性是否相等。toHaveLength
: 匹配长度,检查 length 属性。toHaveBeenCalled
: 检查某个函数是否被调用过。toHaveBeenCalledWith
: 检查某个函数是否被给定的参数调用过。toHaveProperty
: 检查对象是否拥有某个特定的属性。toMatchSnapshot
: 检测是否与之前的快照相匹配。
使用这些匹配器,我们就能够高效地进行组件测试。
示例代码
下面是一个使用 Enzyme 测试 React 应用的完整示例代码:
-- -------------------- ---- ------- -- ---------- ------ ----- ---- -------- ------ ------- ----- ------- ------- --------------- - ------------------ - ------------- ---------- - - ------ -- -- - -------- - ------ - ------- ----------- -- --------------- ------ ---------------- - - ---- ------------------ --------- -- - - -- --------------- ------ ----- ---- -------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------ ------- ---- ----------------- ------------------ -------- --- --------- --- ----------------- ----------- -- -- - ----------- ----------- -- -- - ----- ------- - ---------------- ---- ---------------------------------- --- ---------- -------- --- --------- -- -- - ----- ------- - ---------------- ---- ----- ------ - ----------------------- ------------------------- --------------------------------------- ------------------------------------------------ --- ---------- ---- ----- - -- --------- -- -- - ----- ------- - ---------------- ---- --------------------------------------- --- ---
在上述代码中,我们通过 shallow
方法来对 <Counter>
组件进行测试,包括组件的渲染、点击事件和默认值等测试。我们使用 Jest 的 toMatchSnapshot
匹配器验证了组件的 snapshot
是否与预期相符合。
结语
在现代前端开发中,测试已经成为了不可或缺的环节。Enzyme 是一个非常优秀的测试库,能够有效地帮助我们进行 React 组件的测试工作。本文介绍了 Enzyme 的基本用法以及注意事项,并提供了一个完整的测试代码示例。希望读者能够在实际开发中,通过本文的学习,更加熟练地使用 Enzyme 进行 React 组件测试。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67972a83504e4ea9bde33bd2