在 React 应用程序中集成 Enzyme 测试-JavaScript中文网-JavaScript教程资源分享门户

在现代的前端开发中，测试是不可或缺的一部分。它可以帮助我们保证代码的质量，并在代码发生变化时及时发现问题。在 React 应用程序中，Enzyme 是一个非常流行的测试工具，可以帮助我们进行组件级别的测试。

在本文中，我们将介绍如何在 React 应用程序中集成 Enzyme 测试。我们将从安装 Enzyme 开始，然后演示如何编写测试用例，并介绍一些常用的测试技巧。

安装 Enzyme

首先，我们需要安装 Enzyme。Enzyme 可以通过 npm 安装：

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

这里我们同时安装了 enzyme-adapter-react-16，因为我们将使用 React 16。如果你使用的是其他版本的 React，需要安装相应的适配器。

编写测试用例

在安装 Enzyme 之后，我们可以开始编写测试用例。Enzyme 提供了一些工具来帮助我们测试 React 组件。我们将使用 shallow、mount 和 render 这三个方法来测试组件。

shallow

shallow 方法可以帮助我们测试一个组件的渲染结果。它会渲染组件的最外层元素，并返回一个包含这个元素的浅渲染组件。这个浅渲染组件提供了一些方法，可以帮助我们断言组件的渲染结果。

例如，如果我们有一个简单的组件：

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

我们可以使用 shallow 方法来测试它的渲染结果：

import { shallow } from 'enzyme';

it('renders a greeting', () => {
  const wrapper = shallow(<Greeting name="World" />);
  expect(wrapper.text()).toEqual('Hello, World!');
});

这里，我们使用 shallow 方法来渲染组件，并使用 text 方法来获取渲染结果。然后我们使用 toEqual 方法来断言渲染结果是否等于我们期望的值。

mount

mount 方法可以帮助我们测试一个组件的生命周期方法和事件处理函数。它会渲染组件的所有子组件，并返回一个包含这些组件的完整渲染组件。这个完整渲染组件提供了一些方法，可以帮助我们断言组件的生命周期方法和事件处理函数。

例如，如果我们有一个简单的按钮组件：

function Button(props) {
  function handleClick() {
    props.onClick();
  }

  return <button onClick={handleClick}>{props.label}</button>;
}

我们可以使用 mount 方法来测试它的事件处理函数：

import { mount } from 'enzyme';

it('calls onClick when button is clicked', () => {
  const handleClick = jest.fn();
  const wrapper = mount(<Button label="Click me" onClick={handleClick} />);
  wrapper.find('button').simulate('click');
  expect(handleClick).toHaveBeenCalled();
});

这里，我们使用 mount 方法来渲染组件，并使用 find 方法来查找渲染结果中的按钮元素。然后我们使用 simulate 方法来模拟点击事件，并使用 toHaveBeenCalled 方法来断言事件处理函数是否被调用。

render

render 方法可以帮助我们测试一个组件的样式和布局。它会渲染组件的最外层元素，并返回一个包含这个元素的静态渲染组件。这个静态渲染组件提供了一些方法，可以帮助我们断言组件的样式和布局。

例如，如果我们有一个简单的表格组件：

-- -------------------- ---- -------
-------- ------------ -
  ------ -
    -------
      -------
        ----
          -------------
          ------------
        -----
      --------
      -------
        ------------------ ----- --- -- -- -
          --- -----------
            ---------------
            --------------
          -----
        ---
      --------
    --------
  --
-

我们可以使用 render 方法来测试它的样式和布局：

-- -------------------- ---- -------
------ - ------ - ---- ---------

------- - ------ --- - ------ -- -- -
  ----- ---- - -
    - ----- -------- ---- -- --
    - ----- ------ ---- -- --
  --
  ----- ------- - ------------- ----------- ----
  -------------------------- ------------------------
  -------------------------- ------------------------
---

这里，我们使用 render 方法来渲染组件，并使用 find 方法来查找渲染结果中的表头和表格行元素。然后我们使用 toEqual 方法来断言元素的数量是否等于我们期望的值。

常用的测试技巧

除了上面介绍的方法之外，Enzyme 还提供了许多其他有用的方法来帮助我们测试 React 组件。下面是一些常用的测试技巧：

查找元素

我们可以使用 find 方法来查找渲染结果中的元素。可以使用 CSS 选择器、属性选择器、元素类型等来查找元素。例如：

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('.foo').length).toEqual(1);
expect(wrapper.find('[data-test="bar"]').length).toEqual(1);
expect(wrapper.find('button').length).toEqual(2);

获取元素

我们可以使用 at 方法或数组索引来获取渲染结果中的元素。例如：

const wrapper = shallow(<MyComponent />);
expect(wrapper.find('button').at(0).text()).toEqual('Save');
expect(wrapper.find('li').get(1).props.children).toEqual('Item 2');

断言属性

我们可以使用 props 方法来获取组件的属性，并使用 toEqual 方法来断言属性是否等于我们期望的值。例如：

const wrapper = shallow(<MyComponent foo="bar" />);
expect(wrapper.props().foo).toEqual('bar');

模拟事件

我们可以使用 simulate 方法来模拟事件，并使用 toHaveBeenCalled 方法来断言事件处理函数是否被调用。例如：

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

结论

通过本文的介绍，我们了解了如何在 React 应用程序中集成 Enzyme 测试，并学习了一些常用的测试技巧。测试是一项非常重要的工作，它可以帮助我们保证代码的质量，并在代码发生变化时及时发现问题。希望本文对你有所帮助。

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