在 React 开发中，测试是不可或缺的一部分。而 Enzyme 是一个强大的测试工具，它可以让你更好的测试你的 React 组件。与 Jest 不同的是，Enzyme 提供了更多的方法来扩展你的组件，以便测试更全面更深入。
什么是 Enzyme
Enzyme 是由 Airbnb 开发的一个 React 组件测试库。它提供了强大的支持以测试 React 组件，包括渲染、模拟事件和对组件的分层测试。
与 Jest 不同的是，Enzyme 支持多个渲染方式和多个 API，可以更好的扩展你的组件，以便测试更全面更深入。
Enzyme 的优劣
Enzyme 的优点在于：
- 支持多种渲染方式和 API，可以更好的扩展你的组件
- 可以测试多层嵌套的子组件，方便分层测试
- 支持模拟用户事件，便于测试 UI 交互
Enzyme 的缺点在于：
- 与 Jest 不同，需要单独安装和引入库
- API 繁多，需要花费一些时间熟悉
Enzyme 的常用 API
shallow
shallow 方式可以浅渲染组件，只渲染组件的第一层子组件。可以通过这个方法测试组件是否正常渲染、是否有必要的 prop 等。
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
it('should render correctly', () => {
const wrapper = shallow(<MyComponent />);
expect(wrapper).toMatchSnapshot();
});mount
mount 方式可以渲染组件的所有子组件，是深度渲染组件的方式。可以通过这个方法测试组件的生命周期、子组件的交互等。
-- -------------------- ---- ------- ------ ------- - ----- - ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- --- ---------- ------ ----- ----------- -- -- - ----- ----------- - ---------- ----- ------- - ------------------ --------------------- ---- ----------------------------------------- --------------------------------------- ---
render
render 方式将组件的输出渲染成静态 HTML。这个方法可以用来测试组件的渲染逻辑和样式。
import Enzyme, { render } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
it('should have correct style', () => {
const wrapper = render(<MyComponent />);
expect(wrapper.find('.my-class').css('background-color')).toEqual('red');
});扩展 Enzyme
除了上述常用的 API，你还可以自己扩展 Enzyme，以便更好地测试你的组件。
扩展 shallow
我们可以在 shallow API 中自定义 Wrapper 组件，这个 Wrapper 组件可以包裹真实的子组件，以便方便测试。
-- -------------------- ---- -------
------ ------- - ------- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
----- --------- ------- --------------- -
-------- -
------ -
--------------------------------
--
-
-
----- ------- - -------------------- --- - ------------------ --------- ---扩展 mount
我们可以在 mount API 中自定义 Wrapper 组件，这个 Wrapper 组件可以在测试之前和测试之后执行一些操作。
-- -------------------- ---- -------
------ ------- - ----- - ---- ---------
------ ------- ---- --------------------------
------------------ -------- --- --------- ---
----- --------- ------- --------------- -
------------------- -
-- -- ---------
-
---------------------- -
-- -- ---------
-
-------- -
------ -
--------------------------------
--
-
-
----- ------- - ------------------ --- - ------------------ --------- ---扩展 find
我们可以扩展 find 方法，以便测试一些自定义组件的属性。
-- -------------------- ---- ------- ------ ------- - ------- - ---- --------- ------ ------- ---- -------------------------- ------------------ -------- --- --------- --- ------------------ -------- --- --------- --- --------------------------- - ------------------ - ----- ----- - ---------------------------- ------ ------------------- -- -- --------- -- ----- ------- - -------------------- ---- ----- ----- - ----------------------------------------
总结
Enzyme 是一个强大的测试工具，可以通过多种不同的方式对你的 React 组件进行测试。学习和掌握 Enzyme 对于 React 开发来说是非常重要的，希望这篇文章能够帮助你更好地使用 Enzyme。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463f626968c7c53b04e80a1