你不能错过的 Enzyme 测试组件的 15 个小技巧

在前端开发中，测试是一个重要的环节。Enzyme 是 React 组件的测试工具，它提供了一些强大的 API，可以帮助我们更方便地测试组件。本文将介绍 Enzyme 的 15 个小技巧，帮助你更好地测试 React 组件。

1. 安装 Enzyme

安装 Enzyme 非常简单，只需要使用 npm 或 yarn 安装即可：

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

或者

yarn add --dev enzyme enzyme-adapter-react-16

2. 引入 Enzyme

在测试文件中，需要引入 Enzyme 和适配器：

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

3. 浅渲染

使用 shallow 方法可以进行浅渲染，只渲染组件的第一层，不会渲染子组件：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

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

4. 全渲染

使用 mount 方法可以进行全渲染，渲染整个组件树：

// www.javascriptcn.com code example
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

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

5. 渲染 HTML

使用 render 方法可以渲染 HTML 代码：

// www.javascriptcn.com code example
import { render } from 'enzyme';
import MyComponent from './MyComponent';

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

6. 查找元素

使用 find 方法可以查找元素：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.my-class').length).toBe(1);
  });
});

7. 获取属性

使用 prop 方法可以获取属性：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent name="John" />);
    expect(wrapper.prop('name')).toBe('John');
  });
});

8. 获取状态

使用 state 方法可以获取状态：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.setState({ count: 1 });
    expect(wrapper.state('count')).toBe(1);
  });
});

9. 触发事件

使用 simulate 方法可以触发事件：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    wrapper.find('button').simulate('click');
    expect(wrapper.state('count')).toBe(1);
  });
});

10. 异步测试

使用 async/await 可以进行异步测试：

// www.javascriptcn.com code example
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', async () => {
    const wrapper = mount(<MyComponent />);
    await wrapper.instance().fetchData();
    expect(wrapper.state('data')).toEqual({ name: 'John' });
  });
});

11. 模拟函数

使用 jest.fn() 可以模拟函数：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

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

12. 快照测试

使用 toMatchSnapshot 方法可以进行快照测试：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

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

13. 调试

使用 debug 方法可以输出组件的 HTML 代码：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.debug());
  });
});

14. 打印

使用 text 方法可以输出组件的文本内容：

// www.javascriptcn.com code example
import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = shallow(<MyComponent />);
    console.log(wrapper.text());
  });
});

15. 清除缓存

使用 unmount 方法可以清除缓存：

// www.javascriptcn.com code example
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders correctly', () => {
    const wrapper = mount(<MyComponent />);
    wrapper.unmount();
  });
});

结语

Enzyme 是 React 组件的测试工具，可以帮助我们更方便地测试组件。本文介绍了 Enzyme 的 15 个小技巧，希望可以帮助你更好地测试 React 组件。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d7b0c6a941bf7134dc8c69