zoukankan      html  css  js  c++  java
  • [React Testing] Test a Custom React Hook with React’s Act Utility and a Test Component

    We’ve got a custom useCounter hook here and we want to make sure the increment and decrement functions it returns will update the count state that it returns. Because hooks must be run within the render phase of a component, we’ll create a simple component that simply uses the hook and render that component. One catch is that whenever there’s a state update in your tests, React needs you to wrap that in a call to act. We don’t have to do that for regular component tests that use React Testing Library utilities because those utilities manage the act call internally, but since we’re calling these state updater functions ourselves, we have to wrap things in act. Let’s do that for our useCounter hook.

    Component:

    import React from 'react'
    
    function useCounter({ initialCount = 0, step = 1 } = {}) {
      const [count, setCount] = React.useState(initialCount)
      const increment = () => setCount((c) => c + step)
      const decrement = () => setCount((c) => c - step)
      return { count, increment, decrement }
    }
    
    export { useCounter }

    Test:

    import React from 'react'
    import { render, act } from '@testing-library/react'
    import { useCounter } from '../../components/extra/use-counter'
    
    test('exposes the count and increment/decrement functions', () => {
      let result
      function TestComponent() {
        result = useCounter()
        return null
      }
      render(<TestComponent />)
      expect(result.count).toBe(0)
      act(() => result.increment())
      expect(result.count).toBe(1)
      act(() => result.decrement())
      expect(result.count).toBe(0)
    })
    test('exposes the count and increment/decrement functions', () => {
      const result = {}
      function TestComponent(options) {
        result.current = useCounter(options)
        return null
      }
      const { rerender } = render(<TestComponent />)
      expect(result.current.count).toBe(0)
      act(() => result.current.increment())
      expect(result.current.count).toBe(1)
    
      rerender(<TestComponent step={2} />)
    
      act(() => result.current.decrement())
      expect(result.current.count).toBe(-1)
    })

    Component:

    import { useState, useEffect, useRef } from 'react'
    
    export function useFocus() {
      const inputRef = useRef()
      useEffect(() => {
        inputRef.current.focus()
      }, [])
      return inputRef
    }

    Test:

    import React from 'react'
    import { render } from '@testing-library/react'
    import '@testing-library/jest-dom/extend-expect'
    import { useFocus } from '../hooks'
    
    test('should expose input ref and auto focus on input dom', () => {
      let inputRef
      function InputComponent() {
        inputRef = useFocus()
        return <input ref={inputRef} data-testid="testInput" />
      }
      const { getByTestId } = render(<InputComponent />)
      expect(getByTestId('testInput')).toHaveFocus()
    })
  • 相关阅读:
    SQL PASS 北京2013年6月15日活动照片集
    XML约束文档DTD
    内存管理之虚拟页式分配
    设备驱动中异步通知编程
    王家林 云计算分布式大数据Hadoop实战高手之路第七讲Hadoop图文训练课程:通过HDFS的心跳来测试replication具体的工作机制和流程
    安装配置netanalyzer/netsnmp3.5.7_rc1
    理解Java对象序列化——Serializable接口
    世界500强高频逻辑推理智力面试题(二)
    2column left navigation 中遇到的问题
    Visual Studio 2010 无法打开 源 文件 "iostream.h"
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12823552.html
Copyright © 2011-2022 走看看