酶 - Javascript

酶（Enzyme）是 Facebook 推出的一个 React 测试工具库，旨在使 React 组件的测试更加简单、灵活、强大。

特性

• 提供了类似 jQuery 的 API，方便查询、操作和遍历 React 组件。
• 实现了 Shallow Rendering 和 Full Rendering 两种渲染方式，可选择性地渲染组件。
• 支持多种断言库，例如 Chai、Expect、Assert 等。
• 提供了 API 用于模拟用户行为，例如点击、输入、滚动等。

安装

npm install --save-dev enzyme enzyme-adapter-react-16

开始使用

Shallow Rendering

Shallow Rendering 是启动一个轻量级的环境，只渲染当前组件（不渲染子组件），将组件的 JSX 代码转化成真实的 DOM 结构，并为其提供一些帮助函数来测试组件的行为。

import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });

  it('should handle click event', () => {
    const handleClick = jest.fn();
    const wrapper = shallow(<MyComponent onClick={handleClick} />);
    wrapper.find('button').simulate('click');
    expect(handleClick).toHaveBeenCalled();
  });
});

Full Rendering

Full Rendering 是启动一个完整的环境，渲染当前组件及其所有子组件，可进行生命周期和交互事件的测试。

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('should render correctly', () => {
    const wrapper = mount(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });

  it('should handle click event', () => {
    const handleClick = jest.fn();
    const wrapper = mount(<MyComponent onClick={handleClick} />);
    wrapper.find('button').simulate('click');
    expect(handleClick).toHaveBeenCalled();
  });
});

参考资料

• Enzyme Documentation
• Testing React Components with Enzyme