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 component
<button ref={(node) => this.button = node}>Click me</button>

// Simulating a click event
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 {
   // Click logic: Increment a counter
      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>
      );
   }
}

// Test: Simulate a click event
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>
      );
   }
}

// Test: Simulate a change event on the input
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'; // Import the CSS file

class KeyDownExample extends React.Component {
   // Highlight the selected item
   state = {
      selectedItem: null,
   };
   
   handleKeyDown = (event) => {
      // Set the selected item when Enter key is pressed
      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>
      );
   }
}

// Test: Simulate a key down event with Enter key
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 函数的用法，并提供了示例和实际应用以更好地理解。