zoukankan      html  css  js  c++  java
  • [React Testing] Test your Custom Hook Module with react-hooks-testing-library

    It's always important to test your code, especially if you're open-sourcing it for others to use. In this video, we'll learn how to use react-hooks-testing-library to write a few tests for our custom hook.

    import { useState, useEffect } from 'react'
    
    export function useStarWarsQuote() {
      const [quote, setQuote] = useState('')
      const [loading, setLoading] = useState(false)
    
      useEffect(() => {
        async function getStarWarsQuote() {
          setLoading(true)
          // Get initial text
          const response = await fetch(
            'https://starwars-quote-proxy-gi0d3x1lz.now.sh/api/randomQuote'
          )
          const data = await response.json()
          const quote = data.starWarsQuote
          setQuote(quote)
          setLoading(false)
        }
        getStarWarsQuote()
      }, [])
    
      return { quote, loading }
    }

    Test:

    import { renderHook } from '@testing-library/react-hooks'
    import { useStarWarsQuote } from './'
    
    describe('useStarWarsQuote', () => {
      test('should return an object with the keys: loading, quote', () => {
        // result.current = the value returned by our hook
        const { result } = renderHook(() => useStarWarsQuote())
    
        expect(result.current).toHaveProperty('loading')
        expect(result.current).toHaveProperty('quote')
      })
    
      test('should set loading to true after initial call', () => {
        const { result } = renderHook(() => useStarWarsQuote())
        expect(result.current.loading).toBe(true)
      })
    
      test('should return a quote and set loading to false', async () => {
        // Add test here
        const { result, waitForNextUpdate } = renderHook(() => useStarWarsQuote())
    
    
        await waitForNextUpdate()
        expect(typeof result.current.quote).toBe('string')
        expect(result.current.quote).not.toBe(null)
        expect(result.current.quote).not.toBe('')
        expect(result.current.loading).toBe(false)
      })
    })
  • 相关阅读:
    MyEclipse Ctrl+F搜索框太小
    SqlServer2012评估期已过问题
    $("#form_iframe").contents().find('.nav-tabs').children().eq(2).hide();
    数字格式化
    equals和==的区别
    静态代码块
    this调用有参构造方法
    正则表达式
    日期和时间字符串格式化
    Legacy autograd function with non-static forward method is deprecated and will be removed in 1.3.
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12827669.html
Copyright © 2011-2022 走看看