Enzyme 测试 React 组件时如何找到组件内部的 DOM 节点-JavaScript中文网-JavaScript教程资源分享门户

Enzyme 测试 React 组件时如何找到组件内部的 DOM 节点

在 React 开发中，我们经常需要测试组件的功能和交互。Enzyme 是一个流行的 React 测试工具，它提供了一组强大的 API，可以帮助我们轻松地模拟组件的渲染和交互，并且支持多种测试方式，包括断言、快照和渲染。

但是，在某些情况下，我们需要测试组件内部的 DOM 节点，例如根据用户的输入或操作，验证组件内部的某个元素是否被正确地更新或显示。在这种情况下，我们需要找到组件内部的 DOM 节点，以便进行测试。

Enzyme 提供了一些方法来获取组件内部的 DOM 节点，包括 find、findWhere 和 dive。这些方法的作用如下：

find(selector)：通过 CSS 选择器查找组件内部的 DOM 节点。
findWhere(predicate)：通过自定义函数查找组件内部的 DOM 节点。
dive([options])：进入组件的子组件中，并返回一个新的 Enzyme 实例，可以在其中查找子组件的 DOM 节点。

下面是一个示例代码，演示如何使用这些方法来获取组件内部的 DOM 节点：

import React from 'react';
import Enzyme, { mount } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

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

// 组件
const MyComponent = () => {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

describe('MyComponent', () => {
  it('should render count correctly', () => {
    const wrapper = mount(<MyComponent />);
    const countNode = wrapper.find('p');
    expect(countNode.text()).toBe('Count: 0');

    wrapper.find('button').simulate('click');
    expect(countNode.text()).toBe('Count: 1');
  });
});

在这个示例中，我们使用 mount 方法来渲染 MyComponent，并通过 find 方法获取组件内部的 p 元素，然后通过 text 方法获取元素的文本内容，并验证其是否为 'Count: 0'。接着，我们模拟点击按钮，并再次获取 p 元素的文本内容，并验证其是否为 'Count: 1'。

除了 find 方法，我们还可以使用 findWhere 方法来自定义查找条件。例如，如果我们想查找组件内部的所有 input 元素，并且它们的 value 属性都为 'hello'，我们可以这样做：

const inputNodes = wrapper.findWhere(node => node.type() === 'input' && node.prop('value') === 'hello');

最后，我们还可以使用 dive 方法来查找子组件的 DOM 节点。例如，如果我们有一个父组件和一个子组件，我们可以使用 dive 方法进入子组件，并查找其内部的 DOM 节点：

const wrapper = mount(<ParentComponent />);
const childWrapper = wrapper.find(ChildComponent).dive();
const childNode = childWrapper.find('.child-node');

总结

Enzyme 是一个非常强大的 React 测试工具，可以帮助我们轻松地模拟组件的渲染和交互，并提供了一组强大的 API，可以帮助我们查找组件内部的 DOM 节点。在测试组件时，我们可以使用 Enzyme 提供的 find、findWhere 和 dive 方法来获取组件内部的 DOM 节点，并进行断言、快照和渲染等多种测试方式。

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