这几个 enzyme 的 API，你需要知道

Enzyme 是 React 组件测试库，它提供了一些强大的 API，使得我们可以在测试 React 组件时，轻松地模拟用户交互、查询组件状态和验证组件输出等。本文将详细介绍 Enzyme 中的几个重要 API，旨在帮助你更好地理解和运用 Enzyme。

shallow

shallow 方法是 Enzyme 中最常用的方法之一，它用于浅渲染一个 React 组件，并将其输出作为一个浅渲染对象进行检查。shallow 方法只会渲染当前组件，而不会渲染其子组件。这使得我们可以更好地测试组件的行为，而不受子组件的影响。

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

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

在上面的例子中，我们使用 shallow 方法来浅渲染 MyComponent 组件，并将其输出与快照进行比较。这个例子展示了 shallow 方法的一个典型用例，即测试组件的渲染输出是否符合预期。

mount

mount 方法与 shallow 方法类似，它也用于渲染一个 React 组件，但是与 shallow 方法不同的是，mount 方法会递归渲染组件及其所有子组件。这使得我们可以在测试中模拟用户交互，并检查组件状态的变化。

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

it('updates state correctly', () => {
  const wrapper = mount(<MyComponent />);
  const button = wrapper.find('button');
  button.simulate('click');
  expect(wrapper.state('count')).toEqual(1);
});

在上面的例子中，我们使用 mount 方法来渲染 MyComponent 组件，并模拟用户点击按钮事件。然后，我们检查组件的状态是否正确更新。这个例子展示了 mount 方法的一个典型用例，即测试组件的交互行为是否符合预期。

render

render 方法与 shallow 方法和 mount 方法不同，它使用 React 的静态渲染器将组件输出为 HTML 字符串，但不会将其添加到 DOM 中。这使得我们可以在测试中检查组件输出的 HTML 结构。

import { render } from 'enzyme';
import MyComponent from './MyComponent';

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

在上面的例子中，我们使用 render 方法将 MyComponent 组件渲染为 HTML 字符串，并将其输出与快照进行比较。这个例子展示了 render 方法的一个典型用例，即测试组件的 HTML 结构是否符合预期。

find

find 方法用于在 Enzyme 渲染对象中查找匹配的元素。它可以接受任何有效的 CSS 选择器、React 组件或 Enzyme 渲染器作为参数。

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

it('finds element correctly', () => {
  const wrapper = shallow(<MyComponent />);
  const element = wrapper.find('.my-class');
  expect(element).toHaveLength(1);
});

在上面的例子中，我们使用 find 方法在 MyComponent 组件的浅渲染对象中查找一个类名为 my-class 的元素，并检查是否存在。这个例子展示了 find 方法的一个典型用例，即测试组件中的元素是否存在和匹配。

Conclusion

在本文中，我们介绍了 Enzyme 中的几个重要 API，包括 shallow、mount、render、find 等。这些 API 是 React 组件测试中不可或缺的工具，可以帮助我们更好地测试组件的行为和输出。希望这篇文章能够对你有所帮助，让你更好地理解和运用 Enzyme。

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