zoukankan      html  css  js  c++  java
  • [React Testing] Use React Testing Library to Render and Test Simple React Components

    Component:

    import React from 'react'
    
    function FavoriteNumber({ min = 1, max = 9 }) {
      const [number, setNumber] = React.useState(0)
      const [numberEntered, setNumberEntered] = React.useState(false)
      function handleChange(event) {
        setNumber(Number(event.target.value))
        setNumberEntered(true)
      }
      const isValid = !numberEntered || (number >= min && number <= max)
      return (
        <div>
          <label htmlFor="favorite-number">Favorite Number</label>
          <input
            id="favorite-number"
            type="number"
            value={number}
            onChange={handleChange}
          />
          {isValid ? null : <div role="alert">The number is invalid</div>}
        </div>
      )
    }
    
    export { FavoriteNumber }

    Test:

    import React from 'react'
    // extend expect object to have methods from jest-dom
    import '@testing-library/jest-dom/extend-expect'
    import { render } from '@testing-library/react'
    import { FavoriteNumber } from '../favorite-number'
    
    test('renders a text input with placeholder Search beer', () => {
      const { getByLabelText } = render(<FavoriteNumber />)
      const input = getByLabelText(/favorite number/i)
      expect(input).toHaveAttribute('type', 'number')
    })
  • 相关阅读:
    sql 数据库 初级 个人学习总结(一)
    parentViewController
    关于iOS9之后的loadViewIfNeeded
    判断版本号
    MagicalRecord(简化CoreData操作)
    coreData
    PureLayout(轻量级自动布局)
    MJRefresh(上拉加载下拉刷新)
    MJExtension(JSON到数据模型的自动转换)
    BaceModel
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12810243.html
Copyright © 2011-2022 走看看