ReactJS - Simulate()

在 React 中创建交互式用户界面时，通常需要处理点击和按键等事件。因此，React 提供了一个名为 Simulate() 的实用工具来模拟这些事件以进行测试。在本教程中，我们将介绍 Simulate 的基础知识，并创建不同的应用程序来展示其功能。

要模拟按钮点击，首先确定按钮元素，然后使用 ReactTestUtils.Simulate.click()。

语法

Simulate.{eventName}(
   element,
   [eventData]
)

参数

• eventName − 它是模拟事件的类型，如"click"、"change"或"keyDown"。它定义要分派的 DOM 节点事件。

• element − 它是将获取模拟事件的 DOM 节点。目标元素是事件发生的位置。

• [eventData] − 这是可选的。此参数定义我们选择包含的任何其他事件数据。它取决于正在执行的事件类型。例如，我们可以发送有关为"keyDown"事件按下的键的信息。

返回值

Simulate 函数不返回任何内容。它用于模拟和触发指定 DOM 节点上的事件。目标是出于测试原因复制用户交互。

让我们看下面的示例 −

用法

// 按钮组件
<button ref={(node) => this.button = node}>Click me</button>

// 模拟点击事件
const node = this.button;
ReactTestUtils.Simulate.click(node);

此代码示例创建一个按钮并使用 Simulate.click() 模拟点击该按钮。此方法可用于我们的 React 应用程序中的任何可点击元素。

以下是在 React 中使用 Simulate() 函数的示例 −

示例

示例 − 基本点击计数器应用程序

在此示例中，我们将有一个带有按钮的 React 组件。我们将使用 ReactTestUtils.Simulate.click() 来模拟按钮上的点击事件。因此，此应用程序的代码如下 −

import React from 'react';
import { render } from '@testing-library/react';
import ReactTestUtils from 'react-dom/test-utils';
import './App.css'

class ClickExample extends React.Component {
   // 点击逻辑:增加计数器
      state = {
      clickCount: 0,
   };
   
   handleClick = () => {
      this.setState((prevState) => ({
         clickCount: prevState.clickCount + 1,
      }));
   };
   
   render() {
      return (
         <div className='App'>
            <button className="click-button" onClick={this.handleClick}>Click me</button>
            <p>Click Count: {this.state.clickCount}</p>
         </div>
      );
   }
}

// 测试:模拟点击事件
const { getByText } = render(<ClickExample />);
const buttonNode = getByText('Click me');
ReactTestUtils.Simulate.click(buttonNode);

App.css

.click-button {
   background-color: #4caf50;
   color: white;
   padding: 10px 20px;
   font-size: 16px;
   cursor: pointer;
   border: none;
   border-radius: 4px;
}

.click-button:hover {
   background-color: #45a049;
}

输出

在此示例中，当我们单击按钮时，它将增加计数器，并显示当前计数。

示例 − 模拟更改输入

在此示例中，我们将有一个带有输入字段的 React 组件。我们将利用 ReactTestUtils 模拟输入上的更改事件，使用 Simulate.change()。处理输入更改逻辑涉及定义输入值更改时应该发生什么。因此，整个应用程序的代码如下 −

import React from 'react';
import { render } from '@testing-library/react';
import ReactTestUtils from 'react-dom/test-utils';
import './App.css'

class InputExample extends React.Component {
   state = {
      inputValue: '',
   };
   
   handleChange = (event) => {
      this.setState({
         inputValue: event.target.value,
      });
   };
   
   render() {
      return (
         <div className='App'>
            <input
               className="input-field"
               type="text"
               value={this.state.inputValue}
               onChange={this.handleChange}
            />
            <p>Current Input Value: {this.state.inputValue}</p>
         </div>
      );
   }
}

// 测试:模拟输入上的变化事件
const { container } = render(<InputExample />);
const inputNode = container.querySelector('input');
ReactTestUtils.Simulate.change(inputNode);

App.css

.input-field {
   width: 200px;
   padding: 10px;
   font-size: 16px;
   margin-bottom: 10px;
}

输出

在此示例中，handleChange 方法使用输入字段的当前值更新组件的状态。之后，当前输入值将显示在输入字段下方。这是一个基本示例，我们可以根据具体要求调整逻辑。

示例 − 使用 Enter 键模拟 KeyDown 事件

在此示例中，我们将有一个带有输入字段的 React 组件。因此，我们将使用 ReactTestUtils.Simulate.keyDown() 来模拟输入上 Enter 键的按键事件。因此，此应用程序的代码如下 −

import React from 'react';
import { render } from '@testing-library/react';
import ReactTestUtils from 'react-dom/test-utils';
import './App.css'; // 导入 CSS 文件

class KeyDownExample extends React.Component {
   // 突出显示所选项目
   state = {
      selectedItem: null,
   };
   
   handleKeyDown = (event) => {
      // 按下 Enter 键时设置所选项目
      if (event.key === 'Enter') {
         this.setState({
            selectedItem: event.target.innerText,
         });
      }
   };
   
   render() {
      return (
         <div className="menu">
            <div
               className={`menu-item ${this.state.selectedItem === 'Item 1' ? 'selected' : ''}`}
               onKeyDown={this.handleKeyDown}
            >
            Item 1
            </div>
            <div
               className={`menu-item ${this.state.selectedItem === 'Item 2' ? 'selected' : ''}`}
               onKeyDown={this.handleKeyDown}
            >
               Item 2
            </div>
            <div
               className={`menu-item ${this.state.selectedItem === 'Item 3' ? 'selected' : ''}`}
               onKeyDown={this.handleKeyDown}
            >
               Item 3
            </div>
         </div>
      );
   }
}

// 测试:使用 Enter 键模拟按键事件
const { container } = render(<KeyDownExample />);
const menuNode = container.querySelector('.menu-item');
ReactTestUtils.Simulate.keyDown(menuNode, { key: 'Enter', keyCode: 13, which: 13 });

App.css

.menu {
   margin-left: 250px;
   display: flex;
   flex-direction: column;
}

.menu-item {
   padding: 10px;
   font-size: 16px;
   cursor: pointer;
   border-bottom: 1px solid #ddd;
}

.menu-item:last-child {
   border-bottom: none;
}

.menu-item:hover {
   background-color: #f5f5f5;
}

输出

在此示例中，当我们按下菜单项上的 Enter 键时，将突出显示所选项目。

摘要

React 中的 Simulate 函数用于在 DOM 节点上分派事件以进行测试。它采用的参数包括 eventName(事件类型)、element(DOM 节点)和可选的 eventData(附加事件数据)。在本教程中，我们探讨了 React 中 Simulate 函数的用法，并提供了示例和实际应用以便更好地理解。

reactjs_reference_api.html