使用 Jest + JSDOM 测试 React 中的 DOM 操作及事件方法-JavaScript中文网-JavaScript教程资源分享门户

使用 Jest + JSDOM 测试 React 中的 DOM 操作及事件方法

前端开发过程中，对于页面交互的测试显得尤为重要。在 React 中，使用 Jest + JSDOM 测试 DOM 操作及事件方法是一种非常有效的测试方式。本文将详细介绍如何使用 Jest + JSDOM 测试 React 中的 DOM 操作及事件方法，包括安装、配置、测试等内容，旨在为大家提供实用的指导和学习帮助。

一、安装 Jest 和 JSDOM

首先，我们需要安装 Jest 和 JSDOM 这两个工具。在终端中输入以下命令：

npm install jest jsdom --save-dev

二、配置 Jest

在 package.json 文件中添加以下代码：

"jest": {
  "testEnvironment": "jest-environment-jsdom-fourteen"
}

这里使用 jest-environment-jsdom-fourteen 作为测试环境，同时解决了在 Jest 中使用最新的 JSDOM 版本的问题。如果已经有其他的测试环境，需要将其切换为 jest-environment-jsdom-fourteen。

三、测试 DOM 操作

为了演示如何测试 DOM 操作，我们将创建一个简单的 TodoList 应用。首先，创建一个 TodoList 组件：

import React, { useState } from 'react';

function TodoList() {
  const [todoList, setTodoList] = useState([]);
  const [text, setText] = useState('');

  const handleTextChange = (event) => {
    setText(event.target.value);
  };

  const handleAddClick = () => {
    setTodoList([...todoList, text]);
    setText('');
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleTextChange} />
      <button onClick={handleAddClick}>Add</button>
      <ul>
        {todoList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

在 TodoList 组件中，我们实现了一个功能，可以添加待办事项。当用户在输入框中输入内容，点击“Add”按钮后，输入内容会被添加到待办事项列表中。

接下来，我们需要对 DOM 操作进行测试。创建一个 todoList.test.js 文件：

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import TodoList from './TodoList';

test('Should add new todo to list when user clicks add button', () => {
  const { getByLabelText, getByText } = render(<TodoList />);
  const input = getByLabelText('New todo');
  const button = getByText('Add');

  fireEvent.change(input, { target: { value: 'New Todo' } });
  fireEvent.click(button);

  const list = getByLabelText('Todo list');
  expect(list).toHaveTextContent('New Todo');
});

在这个测试用例中，我们使用 render 方法将 TodoList 组件渲染到文档中，并通过 getByLabelText 和 getByText 选择元素。然后使用 fireEvent 模拟用户的操作，输入“New Todo”并点击“Add”按钮。最后，通过 getByLabelText 选择待办事项列表，并检查列表中是否包含“New Todo”这个文本。

四、测试事件方法

为了演示如何测试事件方法，我们将添加另外一个功能，可以删除待办事项。在 TodoList 组件的 return 语句中修改为如下代码：

return (
  <div>
    <input type="text" value={text} onChange={handleTextChange} />
    <button onClick={handleAddClick}>Add</button>
    <ul aria-label="Todo list">
      {todoList.map((item, index) => (
        <li key={index}>
          {item}
          <button aria-label={`Delete ${item}`} onClick={() => handleDeleteClick(index)}>
            X
          </button>
        </li>
      ))}
    </ul>
  </div>
);

我们添加了一个“X”按钮，当用户点击按钮时，会删除当前待办事项。

接下来，我们需要对事件方法进行测试。在 todoList.test.js 文件中添加如下代码：

test('Should remove todo from list when user clicks delete button', () => {
  const { getByLabelText, getByText, queryByLabelText } = render(<TodoList />);
  const input = getByLabelText('New todo');
  const addButton = getByText('Add');
  const deleteButton = getByLabelText('Delete New Todo');

  fireEvent.change(input, { target: { value: 'New Todo' } });
  fireEvent.click(addButton);
  fireEvent.click(deleteButton);

  const list = getByLabelText('Todo list');
  expect(list).not.toHaveTextContent('New Todo');
  expect(queryByLabelText('Delete New Todo')).toBeNull();
});

在这个测试用例中，我们首先创建了一个待办事项“New Todo”，然后点击删除按钮将其从列表中删除。最后，检查待办事项列表和“Delete New Todo”按钮是否已经不再存在。

通过以上的两个测试用例，我们可以看到，使用 Jest + JSDOM 进行测试可以确保所构建的 React 应用在功能和页面显示等各个方面得到正确显示。

总结

文章介绍了如何使用 Jest + JSDOM 测试 React 中的 DOM 操作及事件方法，包括安装、配置、测试等内容，并通过实际的示例代码详细介绍了具体的操作步骤。Jest + JSDOM 是一种非常有效和便捷的测试方式，希望本文能为大家提供实用的指导和学习帮助。

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

使用 Jest + JSDOM 测试 React 中的 DOM 操作及事件方法

纠错反馈