Enzyme：React 代码测试

React 是一个非常流行的前端开发框架，但如何有效地测试 React 代码呢？这就需要使用 Enzyme 这个工具了。Enzyme 是一个 React 组件测试库，由 Airbnb 开发并维护。本文将介绍 Enzyme 的使用方法和一些技巧。

Enzyme 的三个工具

在使用之前，需要先安装 Enzyme 及其依赖：

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

• enzyme：Enzyme 核心库。
• enzyme-adapter-react-16：将 Enzyme 与 React 16 集成。
• react-test-renderer：React 测试渲染库。

接下来，我们来了解一下 Enzyme 提供的三个工具。

Shallow rendering

Shallow rendering 是一种测试组件的方法，将组件渲染为浅层次的树。它只会渲染当前节点，不会渲染子组件。这种测试方法非常快，适合用于测试单个组件的行为、事件处理函数等。

下面是一个使用 Shallow rendering 测试一个简单组件的例子：

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';

import Button from './Button';

describe('Button Component', () => {
  let button;
  
  beforeEach(() => {
    button = shallow(<Button />);
  });

  it('should render a button', () => {
    expect(button.find('button')).toHaveLength(1);
  });

  it('should render correct text passed in props', () => {
    button.setProps({ text: 'Click Me' });
    expect(button.find('button').text()).toBe('Click Me');
  });

  it('should handle onClick event', () => {
    const handleClick = jest.fn();
    button.setProps({ onClick: handleClick });
    button.find('button').simulate('click');
    expect(handleClick).toHaveBeenCalled();
  });
})

Full rendering

Full rendering 是一种测试组件的方法，将组件渲染为深层次的树，并将子组件也全部渲染出来。这使得我们可以加载实际的 DOM，测试组件的交互和行为。

下面是一个使用 Full rendering 测试一个接收 props 的组件的例子：

// javascriptcn.com 代码示例
import React from 'react';
import { mount } from 'enzyme';

import List from './List';

describe('List Component', () => {
  it('should render list items', () => {
    const items = ['Apple', 'Orange', 'Banana'];
    const list = mount(<List items={items} />);
    expect(list.find('li')).toHaveLength(items.length);
  });
})

Static rendering

Static rendering 是一种将 React 组件渲染为静态 HTML 的方法。这种方法只在测试性能或者需要将静态 HTML 作为字符串返回时使用。

下面是一个使用 Static rendering 渲染组件的示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import { render } from 'enzyme';

import Avatar from './Avatar';

describe('Avatar Component', () => {
  it('should render an avatar with correct src', () => {
    const src = 'http://path/to/image.jpg';
    const avatar = render(<Avatar src={src} />);
    expect(avatar.html()).toContain(`<img src="${src}"`);
  });
})

使用 Jest 进行测试

Enzyme 和 Jest 是非常好的组合，Jest 是一个测试框架，它提供了一些比较方便的测试工具和 API。这里我们将使用 Jest 完成这个例子的测试代码。

// javascriptcn.com 代码示例
import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

import App from './App';

describe('App Component', () => {
  let app;
  
  beforeEach(() => {
    app = shallow(<App />);
  });

  it('should render correctly', () => {
    const tree = renderer.create(<App />).toJSON();
    expect(tree).toMatchSnapshot();
  });

  it('should increase count on button click', () => {
    const button = app.find('button');
    button.simulate('click');
    expect(app.find('span').text()).toBe('Count: 1');
  });

  it('should change title on input change', () => {
    const input = app.find('input');
    input.simulate('change', { target: { value: 'New Title' } });
    expect(app.find('h1').text()).toBe('New Title');
  });
})

上面的代码测试了一个简单的计数器应用，包括根据点击按钮更新计数器、根据输入框更新标题等功能。

总结

使用 Enzyme 可以方便地进行 React 组件的测试，三种渲染方式也可以满足不同的测试需求。在开发过程中，测试是一项非常重要的任务，能够大大提高代码的质量和可测试性。在使用 Enzyme 的过程中，我们还需要注意一些细节问题，比如遵循单一职责原则，这样才能使测试更加准确和有意义。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653969877d4982a6eb2b6f7c