[React Testing] Test React Component Event Handlers with fireEvent from React Testing Library

The fireEvent utility in React Testing Library supports all the events that you regularly use in the web (change, click, etc.). Let’s see how we can test our change event handler with an input.

 

Component:

<input
        id="favorite-number"
        type="number"
        value={number}
        onChange={handleChange}
      />
      {isValid ? null : <div role="alert">The number is invalid</div>}

As we can see, the input has a 'onChange' event, and also there is a message display when the number is outside [1, 9]

 

Test:

复制代码
import React from 'react'
// extend expect object to have methods from jest-dom
import '@testing-library/jest-dom/extend-expect'
import { render, fireEvent } from '@testing-library/react'
import { FavoriteNumber } from './favorite-number'

test('entering an invalid value shows an error message', () => {
  const { getByLabelText, getByRole } = render(<FavoriteNumber />)
  const input = getByLabelText(/favorite number/i)
  // fire a change event
  fireEvent.change(input, { target: { value: 10 } })
  expect(getByRole('alert')).toHaveTextContent(/the number is invalid/i)
})
复制代码

 

posted @   Zhentiw  阅读(396)  评论(1编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
历史上的今天:
2018-04-30 [Python] Create a minimal website in Python using the Flask Microframework
2018-04-30 [GraphQL] Apollo React Mutation Component
2017-04-30 [Angular Unit Testing] Shallow Pipe Testing
2017-04-30 [Angular Unit Testing] Testing Pipe
点击右上角即可分享
微信分享提示