在 React 组件测试中处理鼠标事件

2020-05-28 08:00:00 · 飞浪

介绍测试React组件通常会涉及在验证预期结果之前发生的某种类型的用户交互。这可能包括用户在表单字段中输入内容、按下Esc键关闭模式或单击元素。本指南将向您展示如何在测试中使用这些类型

介绍

测试 React 组件通常会涉及在验证预期结果之前发生的某种类型的用户交互。这可能包括用户在表单字段中输入内容、按下 Esc 键关闭模式或单击元素。本指南将向您展示如何在测试中使用这些类型的事件。

React 测试库

React 测试库是编写 React 组件测试的必备工具。React 测试库 (RTL) 旨在帮助您编写可维护的测试，这些测试侧重于软件的使用方式，而不是实现细节。点击此处了解有关 RTL 的更多信息。本指南中的示例将使用 RTL。

使用 FireEvent 测试点击事件

当您的 React 组件涉及用户点击元素时，您将需要使用RTL 中的fireEvent方法。为了说明此行为，这里有一个带有按钮的简单组件，单击该按钮时会切换图像视图：

      import React from 'react';
export default function App() {
  const [isVisible, setIsVisible] = React.useState(false);
  const handleClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div className='App'>
      <div>
        <button onClick={handleClick}>Toggle Image</button>
      </div>

      <br />

      <div style={{ display: isVisible ? 'block' : 'none' }}>
        <p>Look at this pretty cat</p>
        <img src='https://cataas.com/cat' alt='random cat' />
      </div>
    </div>
  );
}
    

当此组件首次呈现时，不会显示猫图像。您可以通过单击“切换图像”按钮来显示和隐藏图像。要测试切换功能，您可以使用fireEvent.click()方法：

从 RTL导入fireEvent方法
从 RTL导入jest-dom以使用类似toBeVisible()的断言
使用fireEvent.click(element)方法单击元素

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

// 2
import '@testing-library/jest-dom';
import App from './App';

describe('<App />', () => {
  it('Should toggle the cat image div', () => {
    render(<App />);
    // Before clicking the toggle button, the image is NOT visible
    expect(screen.queryByText(/look at this pretty cat/i)).not.toBeVisible();

    // 3
    fireEvent.click(screen.queryByText(/toggle image/i));
    expect(screen.queryByText(/look at this pretty cat/i)).toBeVisible();
  });
});
    

使用用户事件测试用户输入

当您需要测试涉及用户输入的组件时，应使用@testing-library/user-event包中提供的用户事件方法。用户事件用于模拟浏览器中发生的真实事件，如键入、单击或与选择菜单交互。这是一个示例组件，其中用户输入电子邮件地址以查看其是否有效：

      import React from 'react';
export default function Email() {
  const [emailAddress, setEmail] = React.useState();
  const [hasValidEmail, setHasValidEmail] = React.useState(false);
  const handleChange = (event) => {
    setEmail(event.target.value);
  };

  const handleClick = () => {
    const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    setHasValidEmail(regex.test(emailAddress));
  };

  return (
    <div className='App'>
      <div>
        <label htmlFor='email'>Email</label>
        <input
          type='text'
          id='email'
          name='email'
          onChange={handleChange}
          value={emailAddress}
        />
        <button onClick={handleClick}>Check if email is valid</button>
      </div>
      {hasValidEmail && emailAddress ? (
        <p>Email Address is valid</p>
      ) : (
        <p>Email Address is NOT valid</p>
      )}
    </div>
  );
}
    

要测试此组件，您将使用类型方法userEvent.type()，其中您将输入元素作为第一个参数传入，将值作为第二个参数传入：

使用userEvent.type()输入无效的电子邮件地址
使用clear方法清除输入元素的值
输入有效的电子邮件地址

      import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Email from './Email';
import '@testing-library/jest-dom';

describe('<Email />', () => {
  it('Should validate the email address typed by the user', () => {
    render(<Email />);

    // 1
    userEvent.type(screen.queryByLabelText(/email/i), 'ham');
    fireEvent.click(
      screen.queryByRole('button', { name: /Check if email is valid/i }),
    );
    expect(screen.queryByText(/email address is not valid/i)).toBeVisible();

    // 2
    userEvent.clear(screen.queryByLabelText(/email/i));

    // 3
    userEvent.type(screen.queryByLabelText(/email/i), 'ham@samich.com');
    fireEvent.click(
      screen.queryByRole('button', { name: /check if email is valid/i }),
    );
    expect(screen.queryByText(/email address is not valid/i)).toBeNull();
    expect(screen.queryByText(/email address is valid/i)).toBeVisible();
  });
});
    

结论

我希望这能帮助您了解如何测试用户与组件的交互。RTL 提供了许多有用的工具，使此类测试变得容易完成。请查看这些fireEvent和userEvent文档以了解更多信息。

感谢您的阅读！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

在 React 组件测试中处理鼠标事件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; export default function App() { const [isVisible, setIsVisible] = React.useState(false); const handleClick = () => { setIsVisible(!isVisible); }; return ( <div className='App'> <div> <button onClick={handleClick}>Toggle Image</button> </div> <br /> <div style={{ display: isVisible ? 'block' : 'none' }}> <p>Look at this pretty cat</p> <img src='https://cataas.com/cat' alt='random cat' /> </div> </div> ); }

import React from 'react'; // 1 import { render, screen, fireEvent } from '@testing-library/react'; // 2 import '@testing-library/jest-dom'; import App from './App'; describe('<App />', () => { it('Should toggle the cat image div', () => { render(<App />); // Before clicking the toggle button, the image is NOT visible expect(screen.queryByText(/look at this pretty cat/i)).not.toBeVisible(); // 3 fireEvent.click(screen.queryByText(/toggle image/i)); expect(screen.queryByText(/look at this pretty cat/i)).toBeVisible(); }); });

import React from 'react'; export default function Email() { const [emailAddress, setEmail] = React.useState(); const [hasValidEmail, setHasValidEmail] = React.useState(false); const handleChange = (event) => { setEmail(event.target.value); }; const handleClick = () => { const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; setHasValidEmail(regex.test(emailAddress)); }; return ( <div className='App'> <div> <label htmlFor='email'>Email</label> <input type='text' id='email' name='email' onChange={handleChange} value={emailAddress} /> <button onClick={handleClick}>Check if email is valid</button> </div> {hasValidEmail && emailAddress ? ( <p>Email Address is valid</p> ) : ( <p>Email Address is NOT valid</p> )} </div> ); }

import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import Email from './Email'; import '@testing-library/jest-dom'; describe('<Email />', () => { it('Should validate the email address typed by the user', () => { render(<Email />); // 1 userEvent.type(screen.queryByLabelText(/email/i), 'ham'); fireEvent.click( screen.queryByRole('button', { name: /Check if email is valid/i }), ); expect(screen.queryByText(/email address is not valid/i)).toBeVisible(); // 2 userEvent.clear(screen.queryByLabelText(/email/i)); // 3 userEvent.type(screen.queryByLabelText(/email/i), 'ham@samich.com'); fireEvent.click( screen.queryByRole('button', { name: /check if email is valid/i }), ); expect(screen.queryByText(/email address is not valid/i)).toBeNull(); expect(screen.queryByText(/email address is valid/i)).toBeVisible(); }); });