zoukankan      html  css  js  c++  java
  • [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)
    })
  • 相关阅读:
    APP支付,后台支付宝生成预支付设置超时时间timeout_express无效,使用time_expire代替
    一些学习资料
    自连接
    模型成员
    模型查询
    模板
    管理站点
    视图
    设计模型
    搭建开发环境
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12810314.html
Copyright © 2011-2022 走看看