|
| 1 | +import React, { useState, useEffect } from 'react' |
| 2 | +import { testHook, cleanup, act } from 'src' |
| 3 | + |
| 4 | +describe('testHook tests', () => { |
| 5 | + afterEach(cleanup) |
| 6 | + |
| 7 | + test('testHook calls the callback', () => { |
| 8 | + const spy = jest.fn() |
| 9 | + testHook(spy) |
| 10 | + expect(spy).toHaveBeenCalledTimes(1) |
| 11 | + }) |
| 12 | + |
| 13 | + test('confirm we can safely call a React Hook from within the callback', () => { |
| 14 | + testHook(() => useState()) |
| 15 | + }) |
| 16 | + |
| 17 | + test('returns a function to unmount component', () => { |
| 18 | + let isMounted |
| 19 | + const { unmount } = testHook(() => { |
| 20 | + useEffect(() => { |
| 21 | + isMounted = true |
| 22 | + return () => { |
| 23 | + isMounted = false |
| 24 | + } |
| 25 | + }) |
| 26 | + }) |
| 27 | + expect(isMounted).toBe(true) |
| 28 | + unmount() |
| 29 | + expect(isMounted).toBe(false) |
| 30 | + }) |
| 31 | + |
| 32 | + test('returns a function to rerender component', () => { |
| 33 | + let renderCount = 0 |
| 34 | + const { rerender } = testHook(() => { |
| 35 | + useEffect(() => { |
| 36 | + renderCount++ |
| 37 | + }) |
| 38 | + }) |
| 39 | + |
| 40 | + expect(renderCount).toBe(1) |
| 41 | + rerender() |
| 42 | + expect(renderCount).toBe(2) |
| 43 | + }) |
| 44 | + |
| 45 | + test('accepts wrapper option to wrap rendered hook with', () => { |
| 46 | + const ctxA = React.createContext() |
| 47 | + const ctxB = React.createContext() |
| 48 | + const useHook = () => { |
| 49 | + return React.useContext(ctxA) * React.useContext(ctxB) |
| 50 | + } |
| 51 | + let actual |
| 52 | + testHook( |
| 53 | + () => { |
| 54 | + actual = useHook() |
| 55 | + }, |
| 56 | + { |
| 57 | + // eslint-disable-next-line react/display-name |
| 58 | + wrapper: (props) => ( |
| 59 | + <ctxA.Provider value={3}> |
| 60 | + <ctxB.Provider value={4} {...props} /> |
| 61 | + </ctxA.Provider> |
| 62 | + ) |
| 63 | + } |
| 64 | + ) |
| 65 | + expect(actual).toBe(12) |
| 66 | + }) |
| 67 | + |
| 68 | + test('returns result ref with latest result from hook execution', () => { |
| 69 | + function useCounter({ initialCount = 0, step = 1 } = {}) { |
| 70 | + const [count, setCount] = React.useState(initialCount) |
| 71 | + const increment = () => setCount((c) => c + step) |
| 72 | + const decrement = () => setCount((c) => c - step) |
| 73 | + return { count, increment, decrement } |
| 74 | + } |
| 75 | + |
| 76 | + const { result } = testHook(useCounter) |
| 77 | + expect(result.current.count).toBe(0) |
| 78 | + act(() => { |
| 79 | + result.current.increment() |
| 80 | + }) |
| 81 | + expect(result.current.count).toBe(1) |
| 82 | + }) |
| 83 | +}) |
0 commit comments