(value)
11 | valueRef.current = value
12 | return valueRef
13 | }
14 |
--------------------------------------------------------------------------------
/src/useWillUnmount.ts:
--------------------------------------------------------------------------------
1 | import useUpdatedRef from './useUpdatedRef.js'
2 | import { useEffect } from 'react'
3 |
4 | /**
5 | * Attach a callback that fires when a component unmounts
6 | *
7 | * @param fn Handler to run when the component unmounts
8 | * @deprecated Use `useMounted` and normal effects, this is not StrictMode safe
9 | * @category effects
10 | */
11 | export default function useWillUnmount(fn: () => void) {
12 | const onUnmount = useUpdatedRef(fn)
13 |
14 | useEffect(() => () => onUnmount.current(), [])
15 | }
16 |
--------------------------------------------------------------------------------
/test/helpers.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook as baseRenderHook } from '@testing-library/react'
2 |
3 | type ReactWrapper = {
4 | setProps(props: Partial
): void
5 | unmount(): void
6 | }
7 |
8 | export function renderHook any, P = any>(
9 | fn: T,
10 | initialProps?: P,
11 | ): [ReturnType, ReactWrapper] {
12 | const { rerender, result, unmount } = baseRenderHook(fn, { initialProps })
13 |
14 | return [
15 | result.current,
16 | {
17 | unmount,
18 | setProps(props: P) {
19 | rerender({ ...initialProps, ...props })
20 | },
21 | },
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/test/setup.js:
--------------------------------------------------------------------------------
1 | import matchMediaPolyfill from 'mq-polyfill'
2 | import { cleanup } from '@testing-library/react'
3 | import { afterEach } from 'vitest'
4 |
5 | afterEach(cleanup)
6 |
7 | // https://github.com/bigslycat/mq-polyfill
8 |
9 | if (typeof window !== 'undefined') {
10 | matchMediaPolyfill(window)
11 |
12 | /**
13 | * For dispatching resize event
14 | * we must implement window.resizeTo in jsdom
15 | */
16 | window.resizeTo = function resizeTo(width, height) {
17 | Object.assign(this, {
18 | innerWidth: width,
19 | innerHeight: height,
20 | outerWidth: width,
21 | outerHeight: height,
22 | }).dispatchEvent(new this.Event('resize'))
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/test/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "..",
3 | "compilerOptions": {
4 | "rootDir": "..",
5 | "noEmit": true,
6 | "noImplicitAny": false
7 | },
8 | "include": [".", "../src"]
9 | }
10 |
--------------------------------------------------------------------------------
/test/useAnimationFrame.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react'
2 | import useAnimationFrame from '../src/useAnimationFrame.js'
3 | import { describe, it, beforeAll, afterAll, vi, expect } from 'vitest'
4 |
5 | describe('useAnimationFrame', () => {
6 | let rafSpy, rafCancelSpy
7 |
8 | beforeAll(() => {
9 | rafSpy = vi
10 | .spyOn(window, 'requestAnimationFrame')
11 | .mockImplementation((cb) => {
12 | return setTimeout(() => cb(1)) as any
13 | })
14 |
15 | rafCancelSpy = vi
16 | .spyOn(window, 'cancelAnimationFrame')
17 | .mockImplementation((handle) => {
18 | clearTimeout(handle)
19 | })
20 | })
21 |
22 | afterAll(() => {
23 | rafSpy.mockRestore()
24 | rafCancelSpy.mockRestore()
25 | })
26 |
27 | it('should requestAnimationFrame', () => {
28 | vi.useFakeTimers()
29 |
30 | let spy = vi.fn()
31 |
32 | const { result } = renderHook(useAnimationFrame)
33 |
34 | act(() => result.current!.request(spy))
35 |
36 | expect(spy).not.toHaveBeenCalled()
37 |
38 | vi.runAllTimers()
39 |
40 | expect(spy).toHaveBeenCalledTimes(1)
41 | })
42 |
43 | it('should cancel a request', () => {
44 | vi.useFakeTimers()
45 |
46 | let spy = vi.fn()
47 | const { result } = renderHook(useAnimationFrame)
48 |
49 | act(() => {
50 | result.current.request(spy)
51 |
52 | result.current.cancel()
53 | })
54 | vi.runAllTimers()
55 |
56 | expect(spy).toHaveBeenCalledTimes(0)
57 | })
58 |
59 | it('should cancel a request on unmount', () => {
60 | vi.useFakeTimers()
61 |
62 | let spy = vi.fn()
63 | const { result, unmount } = renderHook(useAnimationFrame)
64 |
65 | act(() => result.current!.request(spy))
66 |
67 | unmount()
68 |
69 | vi.runAllTimers()
70 |
71 | expect(spy).toHaveBeenCalledTimes(0)
72 | })
73 | })
74 |
--------------------------------------------------------------------------------
/test/useBreakpoint.ssr.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @vitest-environment node
3 | */
4 |
5 | import { renderToString } from 'react-dom/server'
6 | import useBreakpoint from '../src/useBreakpoint.js'
7 | import { describe, it, expect } from 'vitest'
8 |
9 | describe('useBreakpoint (ssr)', () => {
10 | it('should match immediately if possible', () => {
11 | let matches
12 | const Wrapper = () => {
13 | matches = useBreakpoint('md')
14 | return null
15 | }
16 |
17 | renderToString()
18 | expect(matches).toEqual(false)
19 | })
20 | })
21 |
--------------------------------------------------------------------------------
/test/useBreakpoint.test.tsx:
--------------------------------------------------------------------------------
1 | import useBreakpoint, {
2 | DefaultBreakpointMap,
3 | createBreakpointHook,
4 | } from '../src/useBreakpoint.js'
5 |
6 | import { describe, it, vi, expect, afterEach, beforeEach } from 'vitest'
7 | import { renderHook } from '@testing-library/react'
8 |
9 | interface Props {
10 | breakpoint: DefaultBreakpointMap
11 | }
12 |
13 | describe('useBreakpoint', () => {
14 | let matchMediaSpy
15 |
16 | beforeEach(() => {
17 | matchMediaSpy = vi.spyOn(window, 'matchMedia')
18 | window.resizeTo(1024, window.innerHeight)
19 | })
20 |
21 | afterEach(() => {
22 | matchMediaSpy.mockRestore()
23 | })
24 |
25 | it.each`
26 | width | expected | config
27 | ${1024} | ${false} | ${{ md: 'down', sm: 'up' }}
28 | ${600} | ${true} | ${{ md: 'down', sm: 'up' }}
29 | ${991} | ${true} | ${{ md: 'down' }}
30 | ${992} | ${false} | ${{ md: 'down' }}
31 | ${768} | ${true} | ${{ md: 'up' }}
32 | ${576} | ${false} | ${{ xs: 'down' }}
33 | ${576} | ${false} | ${{ md: true }}
34 | ${800} | ${true} | ${{ md: true }}
35 | ${1000} | ${false} | ${{ md: true }}
36 | ${576} | ${false} | ${'md'}
37 | ${800} | ${true} | ${'md'}
38 | ${1000} | ${false} | ${'md'}
39 | ${500} | ${true} | ${{ xs: 'down' }}
40 | ${0} | ${true} | ${{ xs: 'up' }}
41 | `(
42 | 'should match: $expected with config: $config at window width: $width',
43 | ({ width, expected, config }) => {
44 | window.resizeTo(width, window.innerHeight)
45 |
46 | const { result, unmount } = renderHook(() => useBreakpoint(config))
47 |
48 | expect(result.current).toEqual(expected)
49 | unmount()
50 | },
51 | )
52 |
53 | it('should assume pixels for number values', () => {
54 | const useCustomBreakpoint = createBreakpointHook({
55 | xs: 0,
56 | sm: 400,
57 | md: 700,
58 | })
59 |
60 | renderHook(() => useCustomBreakpoint('sm'))
61 |
62 | expect(matchMediaSpy).toBeCalled()
63 | expect(matchMediaSpy.mock.calls[0][0]).toEqual(
64 | '(min-width: 400px) and (max-width: 699.8px)',
65 | )
66 | })
67 |
68 | it('should use calc for string values', () => {
69 | const useCustomBreakpoint = createBreakpointHook({
70 | xs: 0,
71 | sm: '40rem',
72 | md: '70rem',
73 | })
74 |
75 | renderHook(() => useCustomBreakpoint('sm'))
76 |
77 | expect(matchMediaSpy).toBeCalled()
78 | expect(matchMediaSpy.mock.calls[0][0]).toEqual(
79 | '(min-width: 40rem) and (max-width: calc(70rem - 0.2px))',
80 | )
81 | })
82 |
83 | it('should flatten media', () => {
84 | const useCustomBreakpoint = createBreakpointHook({
85 | sm: 400,
86 | md: 400,
87 | })
88 |
89 | renderHook(() => useCustomBreakpoint({ sm: 'up', md: 'up' }))
90 |
91 | expect(matchMediaSpy.mock.calls[0][0]).toEqual('(min-width: 400px)')
92 | })
93 | })
94 |
--------------------------------------------------------------------------------
/test/useCallbackRef.test.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { render, act } from '@testing-library/react'
3 |
4 | import { describe, it, vi, expect } from 'vitest'
5 | import useCallbackRef from '../src/useCallbackRef.js'
6 |
7 | describe('useCallbackRef', () => {
8 | it('should update value and be fresh in an effect', () => {
9 | const effectSpy = vi.fn()
10 |
11 | function Wrapper({ toggle }) {
12 | const [ref, attachRef] = useCallbackRef<
13 | HTMLDivElement | HTMLSpanElement
14 | >()
15 |
16 | useEffect(() => {
17 | effectSpy(ref)
18 | }, [ref])
19 |
20 | return toggle ?
:
21 | }
22 |
23 | const wrapper = render()
24 |
25 | expect(wrapper.container.getElementsByTagName('span')).toHaveLength(1)
26 | expect(effectSpy).toHaveBeenLastCalledWith(
27 | expect.objectContaining({ tagName: 'SPAN' }),
28 | )
29 |
30 | act(() => {
31 | wrapper.rerender()
32 | })
33 |
34 | expect(wrapper.container.getElementsByTagName('div')).toHaveLength(1)
35 | expect(effectSpy).toHaveBeenLastCalledWith(
36 | expect.objectContaining({ tagName: 'DIV' }),
37 | )
38 | })
39 | })
40 |
--------------------------------------------------------------------------------
/test/useCommittedRef.test.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { renderHook } from '@testing-library/react'
3 | import useCommittedRef from '../src/useCommittedRef.js'
4 | import { describe, it, vi, expect } from 'vitest'
5 |
6 | describe('useCommittedRef', () => {
7 | it('should use fresh value', () => {
8 | const spyA = vi.fn()
9 | const spyB = vi.fn()
10 |
11 | const { rerender } = renderHook(
12 | (fn) => {
13 | const fnRef = useCommittedRef(fn)
14 |
15 | useEffect(() => {
16 | fnRef.current()
17 | })
18 | },
19 | { initialProps: spyA },
20 | )
21 |
22 | rerender(spyB)
23 |
24 | expect(spyA).toHaveBeenCalledTimes(1)
25 | expect(spyB).toHaveBeenCalledTimes(1)
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/test/useCustomEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import useCustomEffect from '../src/useCustomEffect.js'
3 | import useImmediateUpdateEffect from '../src/useImmediateUpdateEffect.js'
4 | import { renderHook } from './helpers.js'
5 |
6 | describe('useCustomEffect', () => {
7 | it('should run custom isEqual logic', () => {
8 | const teardown = vi.fn()
9 |
10 | const spy = vi.fn().mockImplementation(() => teardown)
11 | const isEqual = vi.fn((next, prev) => next[0].foo === prev[0].foo)
12 |
13 | const [, wrapper] = renderHook(
14 | ({ value }) => {
15 | useCustomEffect(spy, [value], isEqual)
16 | },
17 | { value: { foo: true } },
18 | )
19 |
20 | expect(spy).toHaveBeenCalledTimes(1)
21 |
22 | // matches isEqual
23 | wrapper.setProps({ value: { foo: true } })
24 |
25 | expect(spy).toHaveBeenCalledTimes(1)
26 |
27 | // update that should trigger
28 | wrapper.setProps({ value: { foo: false } })
29 |
30 | expect(spy).toHaveBeenCalledTimes(2)
31 | expect(isEqual).toHaveBeenCalledTimes(2)
32 |
33 | expect(teardown).toBeCalledTimes(1)
34 | expect(spy).toHaveBeenCalledTimes(2)
35 |
36 | wrapper.unmount()
37 | expect(teardown).toBeCalledTimes(2)
38 | })
39 |
40 | it('should accept different hooks', () => {
41 | const spy = vi.fn()
42 | const hookSpy = vi.fn().mockImplementation(useImmediateUpdateEffect)
43 |
44 | renderHook(
45 | ({ value }) => {
46 | useCustomEffect(spy, [value], {
47 | isEqual: (next, prev) => next[0].foo === prev[0].foo,
48 | effectHook: hookSpy,
49 | })
50 | },
51 | { value: { foo: true } },
52 | )
53 |
54 | // the update and unmount hook setup
55 | expect(hookSpy).toHaveBeenCalledTimes(1)
56 | // not called b/c useImmediateUpdateEffect doesn't run on initial render
57 | expect(spy).toHaveBeenCalledTimes(0)
58 | })
59 | })
60 |
--------------------------------------------------------------------------------
/test/useDebouncedCallback.test.tsx:
--------------------------------------------------------------------------------
1 | /*! tests an impl adapted from https://github.com/xnimorz/use-debounce/blob/master/test/useDebouncedCallback.test.tsx itself adapted from lodash*/
2 | import { describe, it, vi, expect, afterEach, beforeEach } from 'vitest'
3 | import { renderHook, act, waitFor } from '@testing-library/react'
4 |
5 | import useDebouncedCallback from '../src/useDebouncedCallback.js'
6 |
7 | describe('useDebouncedCallback', () => {
8 | beforeEach(() => {
9 | vi.useFakeTimers()
10 | })
11 |
12 | afterEach(() => {
13 | vi.useRealTimers()
14 | })
15 |
16 | it('should return a function that debounces input callback', () => {
17 | const callback = vi.fn()
18 |
19 | const { result } = renderHook(() => useDebouncedCallback(callback, 500))
20 |
21 | act(() => {
22 | result.current(1)
23 | result.current(2)
24 | result.current(3)
25 | })
26 |
27 | expect(callback).not.toHaveBeenCalled()
28 |
29 | act(() => {
30 | vi.runOnlyPendingTimers()
31 | })
32 |
33 | expect(callback).toHaveBeenCalledTimes(1)
34 | expect(callback).toHaveBeenCalledWith(3)
35 | })
36 |
37 | it('will call leading callback immediately (but only once, as trailing is set to false)', () => {
38 | const callback = vi.fn()
39 |
40 | const { result } = renderHook(() =>
41 | useDebouncedCallback(callback, {
42 | wait: 1000,
43 | leading: true,
44 | trailing: false,
45 | }),
46 | )
47 |
48 | act(() => {
49 | result.current(1)
50 | })
51 |
52 | expect(callback).toHaveBeenCalledTimes(1)
53 |
54 | act(() => {
55 | vi.runOnlyPendingTimers()
56 | })
57 | expect(callback).toHaveBeenCalledTimes(1)
58 | })
59 |
60 | it('will call leading callback as well as next debounced call', () => {
61 | const callback = vi.fn()
62 |
63 | const { result } = renderHook(() =>
64 | useDebouncedCallback(callback, {
65 | wait: 1000,
66 | leading: true,
67 | }),
68 | )
69 |
70 | act(() => {
71 | result.current()
72 | result.current()
73 | result.current()
74 | })
75 |
76 | expect(callback).toHaveBeenCalledTimes(1)
77 |
78 | act(() => {
79 | vi.runOnlyPendingTimers()
80 | })
81 |
82 | expect(callback).toHaveBeenCalledTimes(2)
83 | })
84 |
85 | it('will call three callbacks if no debounced callbacks are pending', () => {
86 | const callback = vi.fn()
87 |
88 | const { result } = renderHook(() =>
89 | useDebouncedCallback(callback, {
90 | wait: 1000,
91 | leading: true,
92 | }),
93 | )
94 |
95 | act(() => {
96 | result.current()
97 | result.current()
98 | result.current()
99 | })
100 |
101 | expect(callback).toHaveBeenCalledTimes(1)
102 |
103 | act(() => {
104 | vi.advanceTimersByTime(1001)
105 | result.current()
106 | })
107 |
108 | expect(callback).toHaveBeenCalledTimes(3)
109 | })
110 |
111 | it('will call a second leading callback if no debounced callbacks are pending with trailing false', () => {
112 | const callback = vi.fn()
113 |
114 | const { result } = renderHook(() =>
115 | useDebouncedCallback(callback, {
116 | wait: 1000,
117 | leading: true,
118 | trailing: false,
119 | }),
120 | )
121 |
122 | act(() => {
123 | result.current()
124 |
125 | setTimeout(() => {
126 | result.current()
127 | }, 1001)
128 | })
129 |
130 | expect(callback).toHaveBeenCalledTimes(1)
131 |
132 | act(() => {
133 | vi.advanceTimersByTime(1001)
134 | })
135 |
136 | expect(callback).toHaveBeenCalledTimes(2)
137 | })
138 |
139 | it('Subsequent calls to the debounced function return the result of the last func invocation.', () => {
140 | const callback = vi.fn(() => 42)
141 |
142 | const { result } = renderHook(() => useDebouncedCallback(callback, 1000))
143 | let retVal
144 |
145 | act(() => {
146 | retVal = result.current()
147 | })
148 |
149 | expect(callback).toHaveBeenCalledTimes(0)
150 | expect(retVal).toBeUndefined()
151 |
152 | act(() => {
153 | vi.runAllTimers()
154 | })
155 |
156 | expect(callback).toHaveBeenCalledTimes(1)
157 |
158 | let subsequentResult
159 | act(() => {
160 | subsequentResult = result.current()
161 | })
162 |
163 | expect(callback).toHaveBeenCalledTimes(1)
164 | expect(subsequentResult).toBe(42)
165 | })
166 |
167 | it('Returns the value when leading immediately', () => {
168 | const callback = vi.fn(() => 42)
169 |
170 | const { result } = renderHook(() =>
171 | useDebouncedCallback(callback, { wait: 1000, leading: true }),
172 | )
173 |
174 | let retVal
175 | act(() => {
176 | retVal = result.current()
177 | })
178 |
179 | expect(callback).toHaveBeenCalledTimes(1)
180 | expect(retVal).toEqual(42)
181 | })
182 |
183 | it("won't call both on the leading edge and on the trailing edge if leading and trailing are set up to true and function call is only once", () => {
184 | const callback = vi.fn()
185 |
186 | const { result } = renderHook(() =>
187 | useDebouncedCallback(callback, {
188 | wait: 1000,
189 | leading: true,
190 | }),
191 | )
192 |
193 | act(() => {
194 | result.current()
195 | })
196 |
197 | expect(callback).toHaveBeenCalledTimes(1)
198 |
199 | act(() => {
200 | vi.runAllTimers()
201 | })
202 |
203 | expect(callback).toHaveBeenCalledTimes(1)
204 | })
205 |
206 | it('will call both on the leading edge and on the trailing edge if leading and trailing are set up to true and there are more than 1 function call', () => {
207 | const callback = vi.fn()
208 |
209 | const { result } = renderHook(() =>
210 | useDebouncedCallback(callback, {
211 | wait: 1000,
212 | leading: true,
213 | }),
214 | )
215 |
216 | act(() => {
217 | result.current()
218 | result.current()
219 | })
220 |
221 | expect(callback).toHaveBeenCalledTimes(1)
222 |
223 | act(() => {
224 | vi.runAllTimers()
225 | })
226 |
227 | expect(callback).toHaveBeenCalledTimes(2)
228 | })
229 |
230 | it.skip('will call callback if maxWait time exceed', async () => {
231 | const callback = vi.fn()
232 |
233 | const { result } = renderHook(() =>
234 | useDebouncedCallback(callback, {
235 | wait: 500,
236 | maxWait: 600,
237 | }),
238 | )
239 |
240 | expect(callback).toHaveBeenCalledTimes(0)
241 |
242 | act(() => {
243 | result.current()
244 | console.log('ran 1')
245 | })
246 |
247 | act(() => {
248 | vi.advanceTimersByTime(700)
249 | })
250 |
251 | expect(callback).toHaveBeenCalledTimes(1)
252 |
253 | act(() => {
254 | console.log('run 2')
255 | result.current()
256 | vi.advanceTimersByTime(1000)
257 | })
258 |
259 | // await act(async () => {
260 | // await
261 | // })
262 |
263 | await waitFor(() => expect(callback).toHaveBeenCalledTimes(1))
264 | })
265 | })
266 |
--------------------------------------------------------------------------------
/test/useDebouncedState.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, act } from '@testing-library/react'
2 | import useDebouncedState from '../src/useDebouncedState.js'
3 | import { describe, it, vi, expect } from 'vitest'
4 |
5 | describe('useDebouncedState', () => {
6 | it('should return a function that debounces input callback', () => {
7 | vi.useFakeTimers()
8 |
9 | let outerSetValue
10 |
11 | function Wrapper() {
12 | const [value, setValue] = useDebouncedState(0, 500)
13 | outerSetValue = setValue
14 | return {value}
15 | }
16 |
17 | const wrapper = render()
18 | expect(wrapper.getByText('0')).toBeTruthy()
19 |
20 | act(() => {
21 | outerSetValue((cur: number) => cur + 1)
22 | outerSetValue((cur: number) => cur + 1)
23 | outerSetValue((cur: number) => cur + 1)
24 | outerSetValue((cur: number) => cur + 1)
25 | outerSetValue((cur: number) => cur + 1)
26 | })
27 |
28 | expect(wrapper.getByText('0')).toBeTruthy()
29 |
30 | act(() => {
31 | vi.runOnlyPendingTimers()
32 | })
33 | expect(wrapper.getByText('1')).toBeTruthy()
34 | })
35 | })
36 |
--------------------------------------------------------------------------------
/test/useDebouncedValue.test.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react'
2 | import { describe, it, vi, expect, beforeEach } from 'vitest'
3 | import { act, render, renderHook, waitFor } from '@testing-library/react'
4 |
5 | import useDebouncedValue from '../src/useDebouncedValue.js'
6 |
7 | describe('useDebouncedValue', () => {
8 | beforeEach(() => {
9 | vi.useFakeTimers()
10 |
11 | return () => {
12 | vi.useRealTimers()
13 | }
14 | })
15 |
16 | it('should return a function that debounces input callback', async () => {
17 | let count = 0
18 |
19 | const { rerender, result } = renderHook(
20 | ({ value }) => {
21 | const debouncedValue = useDebouncedValue(value, 500)
22 |
23 | useEffect(() => {
24 | count++
25 | }, [debouncedValue])
26 |
27 | return debouncedValue
28 | },
29 | { initialProps: { value: 0 } },
30 | )
31 |
32 | expect(result.current).toBe(0)
33 |
34 | act(() => {
35 | rerender({ value: 1 })
36 | rerender({ value: 2 })
37 | rerender({ value: 3 })
38 | rerender({ value: 4 })
39 | rerender({ value: 5 })
40 | })
41 |
42 | expect(result.current).toBe(0)
43 |
44 | act(() => {
45 | vi.advanceTimersByTime(10000)
46 | })
47 |
48 | expect(result.current).toBe(5)
49 |
50 | expect(count).toBe(2)
51 | })
52 |
53 | it('will update value immediately if leading is set to true', () => {
54 | function Wrapper({ text }) {
55 | const value = useDebouncedValue(text, { wait: 1000, leading: true })
56 | return {value}
57 | }
58 | const { rerender, getByText } = render()
59 |
60 | expect(getByText('Hello')).toBeTruthy()
61 |
62 | act(() => {
63 | rerender()
64 | })
65 |
66 | expect(getByText('Hello world')).toBeTruthy()
67 |
68 | act(() => {
69 | rerender()
70 | })
71 |
72 | // timeout shouldn't have been called yet after leading call was executed
73 | expect(getByText('Hello world')).toBeTruthy()
74 |
75 | act(() => {
76 | vi.runAllTimers()
77 | })
78 |
79 | expect(getByText('Hello again')).toBeTruthy()
80 | })
81 |
82 | it('should use isEqual function if supplied', () => {
83 | const isEqual = vi.fn((_left: string, _right: string): boolean => true)
84 |
85 | function Wrapper({ text }) {
86 | const value = useDebouncedValue(text, { wait: 1000, isEqual })
87 | return {value}
88 | }
89 |
90 | const { rerender, getByRole } = render()
91 |
92 | expect(isEqual).toHaveBeenCalledTimes(1)
93 |
94 | act(() => {
95 | rerender()
96 |
97 | vi.runAllTimers()
98 | })
99 |
100 | expect(isEqual).toHaveBeenCalledTimes(2)
101 | expect(isEqual).toHaveBeenCalledWith('Hello', 'Test')
102 |
103 | expect(getByRole('test').textContent).toEqual('Hello')
104 | })
105 | })
106 |
--------------------------------------------------------------------------------
/test/useForceUpdate.test.tsx:
--------------------------------------------------------------------------------
1 | import { act, renderHook } from '@testing-library/react'
2 | import { describe, it, expect } from 'vitest'
3 | import useForceUpdate from '../src/useForceUpdate.js'
4 |
5 | describe('useForceUpdate', () => {
6 | it('should return a function that returns mount state', () => {
7 | let count = 0
8 |
9 | const { result } = renderHook(() => {
10 | count++
11 | return useForceUpdate()
12 | })
13 |
14 | expect(count).toEqual(1)
15 | act(() => {
16 | result.current()
17 | })
18 |
19 | expect(count).toEqual(2)
20 | })
21 | })
22 |
--------------------------------------------------------------------------------
/test/useImmediateUpdateEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import useImmediateUpdateEffect from '../src/useImmediateUpdateEffect.js'
2 | import { describe, it, vi, expect } from 'vitest'
3 | import { renderHook } from './helpers.js'
4 |
5 | describe('useImmediateUpdateEffect', () => {
6 | it('should run update after value changes', () => {
7 | const teardown = vi.fn()
8 | const spy = vi.fn().mockImplementation(() => teardown)
9 |
10 | const [, wrapper] = renderHook(
11 | ({ value }) => {
12 | useImmediateUpdateEffect(spy, [value])
13 | },
14 | { value: 1, other: false },
15 | )
16 |
17 | expect(spy).not.toHaveBeenCalled()
18 |
19 | wrapper.setProps({ value: 2 })
20 |
21 | expect(spy).toHaveBeenCalledTimes(1)
22 |
23 | // update that doesn't change the deps Array
24 | wrapper.setProps({ value: 2, other: true })
25 |
26 | expect(spy).toHaveBeenCalledTimes(1)
27 |
28 | // second update
29 | wrapper.setProps({ value: 4, other: true })
30 |
31 | expect(teardown).toBeCalledTimes(1)
32 | expect(spy).toHaveBeenCalledTimes(2)
33 |
34 | wrapper.unmount()
35 | expect(teardown).toBeCalledTimes(2)
36 | })
37 | })
38 |
--------------------------------------------------------------------------------
/test/useIntersectionObserver.test.tsx:
--------------------------------------------------------------------------------
1 | import useIntersectionObserver from '../src/useIntersectionObserver.js'
2 | import { describe, it, vi, beforeEach, afterEach, Mock, expect } from 'vitest'
3 | import { renderHook, act } from '@testing-library/react'
4 |
5 | describe('useIntersectionObserver', () => {
6 | let observers: any[] = []
7 | beforeEach(() => {
8 | ;(window as any).IntersectionObserver = class IntersectionObserverMock {
9 | observe: Mock
10 | unobserve: Mock
11 | args: [IntersectionObserverCallback, IntersectionObserverInit]
12 | constructor(handler: any, init: any) {
13 | this.args = [handler, init]
14 | this.observe = vi.fn()
15 | this.unobserve = vi.fn()
16 | observers.push(this)
17 | }
18 | }
19 | })
20 |
21 | afterEach(() => {
22 | observers = []
23 | })
24 |
25 | it('should observe element', async () => {
26 | const element = document.createElement('span')
27 |
28 | const { result } = renderHook(() => useIntersectionObserver(element))
29 | const entry = {}
30 | expect(result.current).toEqual([])
31 |
32 | act(() => {
33 | observers[0].args[0]([entry])
34 | })
35 |
36 | expect(result.current[0]).toStrictEqual(entry)
37 | })
38 |
39 | it('should wait for element', async () => {
40 | const element = document.createElement('span')
41 |
42 | const { result, rerender, unmount } = renderHook(
43 | ({ element }) => useIntersectionObserver(element),
44 | { initialProps: { element: null as any } },
45 | )
46 |
47 | expect(result.current).toEqual([])
48 |
49 | expect(observers[0].observe).not.toBeCalled()
50 |
51 | rerender({ element })
52 |
53 | expect(observers[0].observe).toBeCalledTimes(1)
54 |
55 | unmount()
56 |
57 | expect(observers[0].unobserve).toBeCalledTimes(1)
58 | })
59 |
60 | it('should wait for root to set up observer', async () => {
61 | const root = document.createElement('div')
62 | const element = document.createElement('span')
63 |
64 | const { result, rerender } = renderHook(
65 | (root: any) => useIntersectionObserver(element, { root }),
66 | { initialProps: null as null | HTMLElement },
67 | )
68 |
69 | expect(observers).toHaveLength(0)
70 |
71 | rerender(root)
72 |
73 | expect(observers).toHaveLength(1)
74 | expect(observers[0].observe).toBeCalledTimes(1)
75 | })
76 |
77 | it('should accept a callback', async () => {
78 | const spy = vi.fn()
79 | const element = document.createElement('span')
80 |
81 | const { result } = renderHook(() => useIntersectionObserver(element, spy))
82 |
83 | expect(result.current).toEqual(undefined)
84 |
85 | const entry = {}
86 | act(() => {
87 | observers[0].args[0]([entry, observers[0]])
88 | })
89 |
90 | expect(spy).toBeCalledTimes(1)
91 | expect(spy).toHaveBeenLastCalledWith([entry, observers[0]])
92 | })
93 | })
94 |
--------------------------------------------------------------------------------
/test/useInterval.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react'
2 | import { describe, it, vi, expect } from 'vitest'
3 | import useInterval from '../src/useInterval.js'
4 |
5 | describe('useTimeout', () => {
6 | it('should set an interval', () => {
7 | vi.useFakeTimers()
8 |
9 | let spy = vi.fn()
10 |
11 | function Wrapper() {
12 | useInterval(spy, 100)
13 |
14 | return
15 | }
16 |
17 | renderHook(() => useInterval(spy, 100))
18 |
19 | expect(spy).not.toHaveBeenCalled()
20 | act(() => {
21 | vi.runOnlyPendingTimers()
22 | })
23 | expect(spy).toHaveBeenCalledTimes(1)
24 | act(() => {
25 | vi.runOnlyPendingTimers()
26 | })
27 | expect(spy).toHaveBeenCalledTimes(2)
28 | })
29 |
30 | it('should run immediately when argument is set', () => {
31 | vi.useFakeTimers()
32 | let spy = vi.fn()
33 |
34 | renderHook(() => useInterval(spy, 100, false, true))
35 |
36 | expect(spy).toHaveBeenCalledTimes(1)
37 | })
38 |
39 | it('should not run when paused', () => {
40 | vi.useFakeTimers()
41 | let spy = vi.fn()
42 |
43 | renderHook(() => useInterval(spy, 100, true))
44 |
45 | vi.runOnlyPendingTimers()
46 | expect(spy).not.toHaveBeenCalled()
47 | })
48 |
49 | it('should stop running on unmount', () => {
50 | vi.useFakeTimers()
51 | let spy = vi.fn()
52 |
53 | const { unmount } = renderHook(() => useInterval(spy, 100))
54 |
55 | unmount()
56 |
57 | vi.runOnlyPendingTimers()
58 | expect(spy).not.toHaveBeenCalled()
59 | })
60 | })
61 |
--------------------------------------------------------------------------------
/test/useIsInitialRenderRef.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react'
2 | import { describe, it, expect } from 'vitest'
3 | import useIsInitialRenderRef from '../src/useIsInitialRenderRef.js'
4 | import { useLayoutEffect } from 'react'
5 |
6 | describe('useIsInitialRenderRef', () => {
7 | it('should not be true until the second committed render', () => {
8 | let count = 0
9 |
10 | // TODO: test with strict mode
11 | const { rerender } = renderHook(() => {
12 | const ref = useIsInitialRenderRef()
13 |
14 | useLayoutEffect(() => {
15 | if (ref.current) return
16 |
17 | count++
18 | })
19 | })
20 |
21 | expect(count).toEqual(0)
22 |
23 | rerender()
24 |
25 | expect(count).toEqual(1)
26 | })
27 | })
28 |
--------------------------------------------------------------------------------
/test/useIsomorphicEffect.ssr.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @vitest-environment node
3 | */
4 |
5 | import { useEffect } from 'react'
6 | import { describe, it, vi, expect } from 'vitest'
7 |
8 | import { renderToString } from 'react-dom/server'
9 | import useIsomorphicEffect from '../src/useIsomorphicEffect.js'
10 |
11 | describe('useIsomorphicEffect (ssr)', () => {
12 | it('should not run or warn', () => {
13 | let spy = vi.fn()
14 |
15 | expect(useIsomorphicEffect).toEqual(useEffect)
16 |
17 | const Wrapper = () => {
18 | useIsomorphicEffect(spy)
19 | return null
20 | }
21 |
22 | renderToString()
23 | expect(spy).not.toBeCalled()
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/test/useIsomorphicEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect } from 'react'
2 | import { describe, it, vi, expect } from 'vitest'
3 |
4 | import { renderHook } from '@testing-library/react'
5 | import useIsomorphicEffect from '../src/useIsomorphicEffect.js'
6 |
7 | describe('useIsomorphicEffect', () => {
8 | it('should not run or warn', () => {
9 | let spy = vi.fn()
10 |
11 | expect(useIsomorphicEffect).toEqual(useLayoutEffect)
12 |
13 | renderHook(() => {
14 | useIsomorphicEffect(spy)
15 | })
16 |
17 | expect(spy).toBeCalled()
18 | })
19 | })
20 |
--------------------------------------------------------------------------------
/test/useMap.test.tsx:
--------------------------------------------------------------------------------
1 | import { act, render } from '@testing-library/react'
2 | import { describe, it, vi, expect } from 'vitest'
3 | import useMap, { ObservableMap } from '../src/useMap.js'
4 |
5 | describe('useMap', () => {
6 | describe('ObservableMap', () => {
7 | it('should implement a Map', () => {
8 | const map = new ObservableMap(() => {}, [['baz', false]])
9 |
10 | expect(map.size).toEqual(1)
11 |
12 | map.clear()
13 | expect(map.size).toEqual(0)
14 |
15 | expect(map.set('foo', true)).toEqual(map)
16 |
17 | expect(map.get('foo')).toEqual(true)
18 |
19 | expect(map.size).toEqual(1)
20 |
21 | for (const item of map) {
22 | expect(item[0]).toEqual('foo')
23 | expect(item[1]).toEqual(true)
24 | }
25 |
26 | map.set('bar', false)
27 |
28 | expect(Array.from(map.values())).toEqual([true, false])
29 | expect(Array.from(map.keys())).toEqual(['foo', 'bar'])
30 |
31 | expect(map[Symbol.iterator]).toBeDefined()
32 |
33 | expect(map.delete('bar')).toEqual(true)
34 |
35 | expect(map.size).toEqual(1)
36 |
37 | map.clear()
38 | expect(map.size).toEqual(0)
39 | })
40 |
41 | it('should be observable', () => {
42 | const spy = vi.fn()
43 | const map = new ObservableMap(spy)
44 |
45 | map.set('foo', true)
46 | expect(spy).toHaveBeenCalledTimes(1)
47 |
48 | map.set('baz', 3)
49 | expect(spy).toHaveBeenCalledTimes(2)
50 |
51 | map.delete('baz')
52 | expect(spy).toHaveBeenCalledTimes(3)
53 |
54 | map.clear()
55 | expect(spy).toHaveBeenCalledTimes(4)
56 | })
57 | })
58 |
59 | it('should rerender when the map is updated', () => {
60 | let map
61 | function Wrapper() {
62 | map = useMap()
63 | return {JSON.stringify(Array.from(map.entries()))}
64 | }
65 |
66 | const wrapper = render()
67 |
68 | act(() => {
69 | map.set('foo', true)
70 | })
71 |
72 | expect(wrapper.getByText('[["foo",true]]')).toBeTruthy()
73 |
74 | act(() => {
75 | map.set('bar', true)
76 | })
77 |
78 | expect(wrapper.getByText('[["foo",true],["bar",true]]')).toBeTruthy()
79 |
80 | act(() => {
81 | map.clear()
82 | })
83 |
84 | expect(wrapper.getByText('[]')).toBeTruthy()
85 | })
86 | })
87 |
--------------------------------------------------------------------------------
/test/useMediaQuery.ssr.test.tsx:
--------------------------------------------------------------------------------
1 | /**
2 | * @vitest-environment node
3 | */
4 |
5 | import { describe, it, vi, expect } from 'vitest'
6 | import { renderToString } from 'react-dom/server'
7 | import useMediaQuery from '../src/useMediaQuery.js'
8 |
9 | describe('useMediaQuery (ssr)', () => {
10 | it('should match immediately if possible', () => {
11 | let matches
12 | const Wrapper = ({ media }) => {
13 | matches = useMediaQuery(media)
14 | return null
15 | }
16 |
17 | renderToString()
18 | expect(matches).toEqual(false)
19 | })
20 | })
21 |
--------------------------------------------------------------------------------
/test/useMediaQuery.test.tsx:
--------------------------------------------------------------------------------
1 | import useMediaQuery from '../src/useMediaQuery.js'
2 | import { describe, it, expect } from 'vitest'
3 | import { renderHook, act } from '@testing-library/react'
4 |
5 | describe('useMediaQuery', () => {
6 | it('should match immediately if possible', () => {
7 | const wrapper = renderHook(useMediaQuery, {
8 | initialProps: 'min-width: 100px',
9 | })
10 |
11 | expect(window.innerWidth).toBeGreaterThanOrEqual(100)
12 | expect(wrapper.result.current).toEqual(true)
13 |
14 | act(() => {
15 | wrapper.rerender('min-width: 2000px')
16 | })
17 |
18 | expect(window.innerWidth).toBeLessThanOrEqual(2000)
19 | expect(wrapper.result.current).toEqual(false)
20 | })
21 |
22 | it('should clear if no media is passed', () => {
23 | const wrapper = renderHook(useMediaQuery, {
24 | initialProps: null as string | null,
25 | })
26 |
27 | expect(wrapper.result.current).toEqual(false)
28 |
29 | act(() => {
30 | wrapper.rerender('')
31 | })
32 |
33 | expect(wrapper.result.current).toEqual(false)
34 | })
35 | })
36 |
--------------------------------------------------------------------------------
/test/useMergeStateFromProps.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest'
2 | import useMergeStateFromProps from '../src/useMergeStateFromProps.js'
3 | import { render } from '@testing-library/react'
4 |
5 | describe('useMergeStateFromProps', () => {
6 | it('should adjust state when props change', () => {
7 | const updates = [] as Array<{ props: any; state: any }>
8 |
9 | const getDerivedStateFromProps = (
10 | nextProps: { foo: any },
11 | prevState: { lastFoo: any },
12 | ) => {
13 | if (nextProps.foo === prevState.lastFoo) return null
14 |
15 | return { bar: 3, lastFoo: nextProps.foo }
16 | }
17 |
18 | function Foo(props: { foo: any }) {
19 | const [state] = useMergeStateFromProps(props, getDerivedStateFromProps, {
20 | lastFoo: props.foo,
21 | })
22 |
23 | updates.push({ props, state })
24 | return {JSON.stringify(state)}
25 | }
26 |
27 | const wrapper = render()
28 |
29 | expect(updates[0].state).toEqual({ lastFoo: 1 })
30 | wrapper.rerender()
31 |
32 | // render with new props, rerender with state change
33 | expect(updates).toHaveLength(3)
34 | expect(updates[2].state).toEqual({ lastFoo: 2, bar: 3 })
35 |
36 | // @ts-ignore
37 | wrapper.rerender()
38 |
39 | // render with props, no update
40 | expect(updates).toHaveLength(4)
41 |
42 | wrapper.rerender()
43 |
44 | // render with new props, rerender with state change
45 | expect(updates).toHaveLength(6)
46 | })
47 |
48 | it('should adjust state when props change', () => {
49 | type Props = { foo: number }
50 | type State = { lastFoo: number }
51 | const updates = [] as any[]
52 |
53 | function Foo(props: { foo: any }) {
54 | const [state, setState] = useMergeStateFromProps(
55 | props,
56 | (nextProps, prevState) => {
57 | if (nextProps.foo === prevState.lastFoo) return null
58 |
59 | return { bar: 3, lastFoo: nextProps.foo }
60 | },
61 | { lastFoo: props.foo },
62 | )
63 |
64 | updates.push({ props, state })
65 | return {JSON.stringify(state)}
66 | }
67 |
68 | const wrapper = render()
69 |
70 | wrapper.rerender()
71 | })
72 | })
73 |
--------------------------------------------------------------------------------
/test/useMergedRefs.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { describe, it, expect } from 'vitest'
3 | import useCallbackRef from '../src/useCallbackRef.js'
4 | import useMergedRefs from '../src/useMergedRefs.js'
5 | import { render } from '@testing-library/react'
6 |
7 | describe('useMergedRefs', () => {
8 | it('should return a function that returns mount state', () => {
9 | let innerRef: HTMLButtonElement
10 | const outerRef = React.createRef()
11 |
12 | const Button = React.forwardRef((props, ref) => {
13 | const [buttonEl, attachRef] = useCallbackRef()
14 | innerRef = buttonEl!
15 |
16 | const mergedRef = useMergedRefs(ref, attachRef)
17 |
18 | return
19 | })
20 |
21 | const result = render()
22 |
23 | expect(innerRef!.tagName).toEqual('BUTTON')
24 | expect(outerRef.current!.tagName).toEqual('BUTTON')
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/test/useMountEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from './helpers.js'
2 | import { describe, it, vi, expect } from 'vitest'
3 |
4 | import useMountEffect from '../src/useMountEffect.js'
5 |
6 | describe('useMountEffect', () => {
7 | it('should run update only on mount', () => {
8 | const teardown = vi.fn()
9 | const spy = vi.fn(() => teardown)
10 |
11 | const [, wrapper] = renderHook(
12 | () => {
13 | useMountEffect(spy)
14 | },
15 | { value: 1, other: false },
16 | )
17 |
18 | expect(spy).toHaveBeenCalledTimes(1)
19 |
20 | wrapper.setProps({ value: 2 })
21 |
22 | expect(spy).toHaveBeenCalledTimes(1)
23 |
24 | wrapper.setProps({ value: 2, other: true })
25 |
26 | expect(spy).toHaveBeenCalledTimes(1)
27 |
28 | wrapper.unmount()
29 |
30 | expect(teardown).toHaveBeenCalledTimes(1)
31 | })
32 | })
33 |
--------------------------------------------------------------------------------
/test/useMounted.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from '@testing-library/react'
3 |
4 | import useMounted from '../src/useMounted.js'
5 |
6 | describe('useMounted', () => {
7 | it('should return a function that returns mount state', () => {
8 | const { result, unmount } = renderHook(useMounted)
9 |
10 | expect(result.current()).toEqual(true)
11 |
12 | unmount()
13 |
14 | expect(result.current()).toEqual(false)
15 | })
16 | })
17 |
--------------------------------------------------------------------------------
/test/useMutationObserver.test.tsx:
--------------------------------------------------------------------------------
1 | import { act, render } from '@testing-library/react'
2 | import { describe, it, Mock, MockInstance, vi, expect, afterEach } from 'vitest'
3 |
4 | import useMutationObserver from '../src/useMutationObserver.js'
5 | import useCallbackRef from '../src/useCallbackRef.js'
6 |
7 | describe('useMutationObserver', () => {
8 | it('should add a mutation observer', async () => {
9 | const teardown = vi.fn()
10 | const spy = vi.fn(() => teardown)
11 |
12 | function Wrapper(props) {
13 | const [el, attachRef] = useCallbackRef()
14 |
15 | useMutationObserver(el, { attributes: true }, spy)
16 |
17 | return
18 | }
19 |
20 | const wrapper = render()
21 |
22 | expect(spy).toHaveBeenCalledTimes(0)
23 |
24 | act(() => {
25 | wrapper.rerender()
26 | })
27 |
28 | await Promise.resolve()
29 |
30 | expect(spy).toHaveBeenCalledTimes(1)
31 |
32 | expect(spy).toHaveBeenCalledWith(
33 | [
34 | expect.objectContaining({
35 | type: 'attributes',
36 | attributeName: 'role',
37 | }),
38 | ],
39 | expect.anything(),
40 | )
41 | // coverage on the teardown
42 | wrapper.unmount()
43 | })
44 |
45 | let disconnentSpy: MockInstance<() => void>
46 | afterEach(() => {
47 | disconnentSpy?.mockRestore()
48 | })
49 |
50 | it('should update config', async () => {
51 | const teardown = vi.fn()
52 | const spy = vi.fn(() => teardown)
53 |
54 | disconnentSpy = vi.spyOn(MutationObserver.prototype, 'disconnect')
55 |
56 | function Wrapper({ attributeFilter, ...props }: any) {
57 | const [el, attachRef] = useCallbackRef()
58 |
59 | useMutationObserver(el, { attributes: true, attributeFilter }, spy)
60 |
61 | return
62 | }
63 |
64 | const wrapper = render()
65 |
66 | wrapper.rerender(
67 | ,
68 | )
69 |
70 | await Promise.resolve()
71 |
72 | expect(spy).toHaveBeenCalledTimes(0)
73 |
74 | wrapper.rerender()
75 |
76 | await Promise.resolve()
77 |
78 | expect(spy).toHaveBeenCalledTimes(1)
79 |
80 | expect(spy).toHaveBeenCalledWith(
81 | [
82 | expect.objectContaining({
83 | type: 'attributes',
84 | attributeName: 'role',
85 | }),
86 | ],
87 | expect.anything(),
88 | )
89 | expect(disconnentSpy).toBeCalledTimes(1)
90 |
91 | wrapper.unmount()
92 |
93 | expect(disconnentSpy).toBeCalledTimes(2)
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/test/usePrevious.test.tsx:
--------------------------------------------------------------------------------
1 | import { renderHook } from '@testing-library/react'
2 | import { describe, it, expect } from 'vitest'
3 |
4 | import usePrevious from '../src/usePrevious.js'
5 |
6 | describe('usePrevious', () => {
7 | it('should return a function that returns mount state', () => {
8 | const wrapper = renderHook(({ foo }) => usePrevious(foo), {
9 | initialProps: { foo: true },
10 | })
11 |
12 | expect(wrapper.result.current).toEqual(null)
13 |
14 | wrapper.rerender({ foo: false })
15 |
16 | expect(wrapper.result.current).toEqual(true)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/test/useRefWithInitialValueFactory.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from './helpers.js'
3 | import useRefWithInitialValueFactory from '../src/useRefWithInitialValueFactory.js'
4 |
5 | describe('useRefWithInitialValueFactory', () => {
6 | it('should set a ref value using factory once', () => {
7 | const spy = vi.fn((v: number) => v)
8 |
9 | const [ref, wrapper] = renderHook(
10 | ({ value }) => {
11 | return useRefWithInitialValueFactory(() => spy(value))
12 | },
13 | { value: 2 },
14 | )
15 |
16 | expect(spy).toHaveBeenCalledTimes(1)
17 | expect(spy).toHaveBeenCalledWith(2)
18 |
19 | expect(ref.current).toEqual(2)
20 |
21 | wrapper.setProps({ value: 1 })
22 |
23 | expect(spy).toHaveBeenCalledTimes(1)
24 | expect(ref.current).toEqual(2)
25 | })
26 | })
27 |
--------------------------------------------------------------------------------
/test/useSafeState.test.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { describe, it, expect } from 'vitest'
3 | import { act, renderHook, waitFor } from '@testing-library/react'
4 |
5 | import useSafeState from '../src/useSafeState.js'
6 | import useStateAsync from '../src/useStateAsync.js'
7 |
8 | describe('useSafeState', () => {
9 | it('should work transparently', () => {
10 | const { result, unmount } = renderHook(() => useSafeState(useState(false)))
11 |
12 | expect(result.current[0]).toEqual(false)
13 |
14 | act(() => {
15 | result.current[1](true)
16 | })
17 | expect(result.current[0]).toEqual(true)
18 |
19 | unmount()
20 |
21 | act(() => {
22 | result.current[1](false)
23 | })
24 | expect(result.current[0]).toEqual(true)
25 | })
26 |
27 | it('should work with async setState', async () => {
28 | const { result, unmount } = renderHook(() =>
29 | useSafeState(useStateAsync(false)),
30 | )
31 |
32 | expect(result.current[0]).toEqual(false)
33 |
34 | act(() => {
35 | result.current[1](true)
36 | })
37 |
38 | await waitFor(() => {
39 | expect(result.current[0]).toEqual(true)
40 | })
41 |
42 | expect(result.current[0]).toEqual(true)
43 |
44 | unmount()
45 |
46 | act(() => result.current[1](true))
47 |
48 | await waitFor(() => {
49 | expect(result.current[0]).toEqual(true)
50 | })
51 | })
52 | })
53 |
--------------------------------------------------------------------------------
/test/useSet.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { render, act } from '@testing-library/react'
3 |
4 | import useSet, { ObservableSet } from '../src/useSet.js'
5 |
6 | describe('useSet', () => {
7 | describe('ObservableSet', () => {
8 | it('should implement a Set', () => {
9 | const set = new ObservableSet(() => {}, ['baz'])
10 |
11 | expect(set.size).toEqual(1)
12 |
13 | set.clear()
14 | expect(set.size).toEqual(0)
15 |
16 | expect(set.add('foo')).toEqual(set)
17 |
18 | expect(set.has('foo')).toEqual(true)
19 |
20 | expect(set.size).toEqual(1)
21 |
22 | for (const item of set) {
23 | expect(item).toEqual('foo')
24 | }
25 |
26 | set.add('bar')
27 |
28 | expect(Array.from(set.values())).toEqual(['foo', 'bar'])
29 | expect(Array.from(set.keys())).toEqual(['foo', 'bar'])
30 |
31 | expect(set[Symbol.iterator]).toBeDefined()
32 |
33 | expect(set.delete('bar')).toEqual(true)
34 |
35 | expect(set.size).toEqual(1)
36 |
37 | set.clear()
38 | expect(set.size).toEqual(0)
39 | })
40 |
41 | it('should be observable', () => {
42 | const spy = vi.fn()
43 | const set = new ObservableSet(spy)
44 |
45 | set.add('foo')
46 | expect(spy).toHaveBeenCalledTimes(1)
47 |
48 | set.add('baz')
49 | expect(spy).toHaveBeenCalledTimes(2)
50 |
51 | set.delete('baz')
52 | expect(spy).toHaveBeenCalledTimes(3)
53 |
54 | set.clear()
55 | expect(spy).toHaveBeenCalledTimes(4)
56 | })
57 | })
58 |
59 | it('should rerender when the set is updated', () => {
60 | let set
61 | function Wrapper() {
62 | set = useSet()
63 | return {JSON.stringify(Array.from(set))}
64 | }
65 |
66 | const wrapper = render()
67 |
68 | act(() => {
69 | set.add('foo')
70 | })
71 |
72 | expect(wrapper.getByText('["foo"]')).toBeTruthy()
73 |
74 | act(() => {
75 | set.add('bar')
76 | })
77 |
78 | expect(wrapper.getByText('["foo","bar"]')).toBeTruthy()
79 |
80 | act(() => {
81 | set.clear()
82 | })
83 |
84 | expect(wrapper.getByText('[]')).toBeTruthy()
85 | })
86 | })
87 |
--------------------------------------------------------------------------------
/test/useStateAsync.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, expect } from 'vitest'
2 | import { renderHook, act } from '@testing-library/react'
3 |
4 | import useStateAsync from '../src/useStateAsync.js'
5 |
6 | describe('useStateAsync', () => {
7 | it('should increment counter', async () => {
8 | const { result } = renderHook(() => useStateAsync(0))
9 |
10 | expect.assertions(4)
11 |
12 | const incrementAsync = async () => {
13 | let promise
14 | act(() => {
15 | promise = result.current[1]((prev) => prev + 1)
16 | })
17 |
18 | await promise
19 | }
20 |
21 | expect(result.current![0]).toEqual(0)
22 |
23 | await incrementAsync()
24 | expect(result.current![0]).toEqual(1)
25 |
26 | await incrementAsync()
27 | expect(result.current![0]).toEqual(2)
28 |
29 | await incrementAsync()
30 |
31 | expect(result.current![0]).toEqual(3)
32 | })
33 |
34 | it('should reject on error', async () => {
35 | const { result } = renderHook(() => useStateAsync(1))
36 |
37 | let promise = act(() =>
38 | result.current[1](() => {
39 | throw new Error('yo')
40 | }),
41 | )
42 |
43 | await expect(promise).rejects.toThrow('yo')
44 | })
45 |
46 | it('should resolve even if no update happens', async () => {
47 | const { result } = renderHook(() => useStateAsync(1))
48 |
49 | expect.assertions(3)
50 |
51 | expect(result.current![0]).toEqual(1)
52 |
53 | await act(() => expect(result.current[1](1)).resolves.toEqual(1))
54 |
55 | expect(result.current![0]).toEqual(1)
56 | })
57 |
58 | it('should resolve after update if already pending', async () => {
59 | const { result } = renderHook(() => useStateAsync(0))
60 |
61 | expect.assertions(5)
62 |
63 | expect(result.current![0]).toEqual(0)
64 |
65 | const setAndAssert = (n: number) =>
66 | expect(result.current[1](n)).resolves.toEqual(2)
67 |
68 | let promise
69 |
70 | act(() => {
71 | promise = Promise.all([setAndAssert(1), setAndAssert(1), setAndAssert(2)])
72 | })
73 |
74 | await promise
75 |
76 | expect(result.current![0]).toEqual(2)
77 | })
78 | })
79 |
--------------------------------------------------------------------------------
/test/useThrottledEventHandler.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from './helpers.js'
3 | import useThrottledEventHandler from '../src/useThrottledEventHandler.js'
4 | import { waitFor } from '@testing-library/dom'
5 |
6 | describe('useThrottledEventHandler', () => {
7 | it('should throttle and use return the most recent event', async () => {
8 | const spy = vi.fn()
9 |
10 | const [handler, wrapper] = renderHook(() =>
11 | useThrottledEventHandler(spy),
12 | )
13 |
14 | const events = [
15 | new MouseEvent('pointermove'),
16 | new MouseEvent('pointermove'),
17 | new MouseEvent('pointermove'),
18 | ]
19 |
20 | events.forEach(handler)
21 |
22 | expect(spy).not.toHaveBeenCalled()
23 |
24 | await waitFor(() => {
25 | expect(spy).toHaveBeenCalledTimes(1)
26 | })
27 |
28 | expect(spy).toHaveBeenCalledWith(events[events.length - 1])
29 |
30 | wrapper.unmount()
31 |
32 | handler(new MouseEvent('pointermove'))
33 |
34 | return new Promise((resolve) => {
35 | setTimeout(() => {
36 | expect(spy).toHaveBeenCalledTimes(1)
37 |
38 | resolve()
39 | }, 20)
40 | })
41 | })
42 |
43 | it('should clear pending handler calls', async () => {
44 | const spy = vi.fn()
45 |
46 | const [handler, wrapper] = renderHook(() =>
47 | useThrottledEventHandler(spy),
48 | )
49 | ;[
50 | new MouseEvent('pointermove'),
51 | new MouseEvent('pointermove'),
52 | new MouseEvent('pointermove'),
53 | ].forEach(handler)
54 |
55 | expect(spy).not.toHaveBeenCalled()
56 |
57 | handler.clear()
58 |
59 | await waitFor(() => {
60 | expect(spy).toHaveBeenCalledTimes(0)
61 | })
62 | })
63 | })
64 |
--------------------------------------------------------------------------------
/test/useTimeout.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import useTimeout from '../src/useTimeout.js'
3 | import { render, act } from '@testing-library/react'
4 |
5 | describe('useTimeout', () => {
6 | it('should set a timeout', () => {
7 | vi.useFakeTimers()
8 |
9 | let spy = vi.fn()
10 | let timeout!: ReturnType
11 |
12 | function Wrapper() {
13 | timeout = useTimeout()
14 |
15 | return
16 | }
17 |
18 | render()
19 |
20 | act(() => {
21 | timeout.set(spy, 100)
22 | })
23 |
24 | expect(timeout.isPending).toBe(true)
25 | expect(spy).not.toHaveBeenCalled()
26 |
27 | act(() => {
28 | vi.runAllTimers()
29 | })
30 |
31 | expect(timeout.isPending).toBe(false)
32 | expect(spy).toHaveBeenCalledTimes(1)
33 | })
34 |
35 | it('should clear a timeout', () => {
36 | vi.useFakeTimers()
37 |
38 | let spy = vi.fn()
39 |
40 | let timeout!: ReturnType
41 |
42 | function Wrapper() {
43 | timeout = useTimeout()
44 |
45 | return
46 | }
47 |
48 | render()
49 |
50 | act(() => {
51 | timeout.set(spy, 100)
52 | })
53 |
54 | expect(timeout.isPending).toBe(true)
55 |
56 | act(() => {
57 | timeout!.clear()
58 | })
59 |
60 | vi.runAllTimers()
61 | expect(timeout.isPending).toBe(false)
62 | expect(spy).toHaveBeenCalledTimes(0)
63 | })
64 |
65 | it('should clear a timeout on unmount', () => {
66 | vi.useFakeTimers()
67 |
68 | let spy = vi.fn()
69 | let timeout: ReturnType
70 |
71 | function Wrapper() {
72 | timeout = useTimeout()
73 |
74 | return
75 | }
76 |
77 | const wrapper = render()
78 |
79 | act(() => {
80 | timeout!.set(spy, 100)
81 | })
82 |
83 | wrapper.unmount()
84 |
85 | act(() => {
86 | vi.runAllTimers()
87 | })
88 |
89 | expect(spy).toHaveBeenCalledTimes(0)
90 | })
91 |
92 | it('should handle very large timeouts', () => {
93 | vi.useFakeTimers()
94 |
95 | let spy = vi.fn()
96 | let timeout: ReturnType
97 |
98 | function Wrapper() {
99 | timeout = useTimeout()
100 |
101 | return
102 | }
103 |
104 | render()
105 |
106 | const MAX = 2 ** 31 - 1
107 |
108 | act(() => {
109 | timeout!.set(spy, MAX + 100)
110 | })
111 |
112 | // some time to check that it didn't overflow and fire immediately
113 | vi.advanceTimersByTime(100)
114 |
115 | expect(spy).toHaveBeenCalledTimes(0)
116 |
117 | act(() => {
118 | vi.runAllTimers()
119 | })
120 |
121 | expect(spy).toHaveBeenCalledTimes(1)
122 | })
123 | })
124 |
--------------------------------------------------------------------------------
/test/useToggleState.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import useToggleState from '../src/useToggleState.js'
3 | import { act, renderHook } from '@testing-library/react'
4 |
5 | describe('useToggleState', () => {
6 | it('should toggle', () => {
7 | let { result } = renderHook(() => useToggleState(false))
8 |
9 | expect(result.current![0]).toEqual(false)
10 |
11 | act(() => result.current[1]())
12 |
13 | expect(result.current![0]).toEqual(true)
14 |
15 | act(() => result.current[1](true))
16 |
17 | expect(result.current![0]).toEqual(true)
18 |
19 | act(() => result.current[1]())
20 |
21 | expect(result.current![0]).toEqual(false)
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/test/useUpdateEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from './helpers.js'
3 |
4 | import useUpdateEffect from '../src/useUpdateEffect.js'
5 |
6 | describe('useUpdateEffect', () => {
7 | it('should run update after value changes', () => {
8 | const teardown = vi.fn()
9 | const spy = vi.fn(() => teardown)
10 |
11 | const [, wrapper] = renderHook(
12 | ({ value }) => {
13 | useUpdateEffect(spy, [value])
14 | },
15 | { value: 1, other: false },
16 | )
17 |
18 | expect(spy).not.toHaveBeenCalled()
19 | expect(teardown).not.toHaveBeenCalled()
20 |
21 | wrapper.setProps({ value: 2 })
22 |
23 | expect(spy).toHaveBeenCalledTimes(1)
24 | expect(teardown).not.toHaveBeenCalled()
25 |
26 | // unrelated render
27 | wrapper.setProps({ value: 2, other: true })
28 |
29 | expect(spy).toHaveBeenCalledTimes(1)
30 |
31 | wrapper.setProps({ value: 3, other: true })
32 |
33 | expect(spy).toHaveBeenCalledTimes(2)
34 | expect(teardown).toHaveBeenCalledTimes(1)
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/test/useUpdateLayoutEffect.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from './helpers.js'
3 |
4 | import useUpdateLayoutEffect from '../src/useUpdateLayoutEffect.js'
5 |
6 | describe('useUpdateLayoutEffect', () => {
7 | it('should run update after value changes', () => {
8 | const teardown = vi.fn()
9 | const spy = vi.fn(() => teardown)
10 |
11 | const [, wrapper] = renderHook(
12 | ({ value }) => {
13 | useUpdateLayoutEffect(spy, [value])
14 | },
15 | { value: 1, other: false },
16 | )
17 |
18 | expect(spy).not.toHaveBeenCalled()
19 | expect(teardown).not.toHaveBeenCalled()
20 |
21 | wrapper.setProps({ value: 2 })
22 |
23 | expect(spy).toHaveBeenCalledTimes(1)
24 | expect(teardown).not.toHaveBeenCalled()
25 |
26 | // unrelated render
27 | wrapper.setProps({ value: 2, other: true })
28 |
29 | expect(spy).toHaveBeenCalledTimes(1)
30 |
31 | wrapper.setProps({ value: 3, other: true })
32 |
33 | expect(spy).toHaveBeenCalledTimes(2)
34 | expect(teardown).toHaveBeenCalledTimes(1)
35 | })
36 | })
37 |
--------------------------------------------------------------------------------
/test/useWillUnmount.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it, vi, expect } from 'vitest'
2 | import { renderHook } from '@testing-library/react'
3 |
4 | import useWillUnmount from '../src/useWillUnmount.js'
5 |
6 | describe('useWillUnmount', () => {
7 | it('should return a function that returns mount state', () => {
8 | let spy = vi.fn()
9 |
10 | const wrapper = renderHook(() => useWillUnmount(spy))
11 |
12 | expect(spy).not.toHaveBeenCalled()
13 |
14 | wrapper.unmount()
15 |
16 | expect(spy).toHaveBeenCalledTimes(1)
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "rootDir": "src",
4 | "skipLibCheck": true,
5 | "lib": ["esnext", "dom"],
6 | "target": "esnext",
7 | "module": "nodenext",
8 | "moduleResolution": "nodenext",
9 | "allowJs": true,
10 | "allowSyntheticDefaultImports": true,
11 | "downlevelIteration": true,
12 | "esModuleInterop": true,
13 | "experimentalDecorators": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "isolatedModules": true,
16 | "stripInternal": true,
17 | "noFallthroughCasesInSwitch": true,
18 | "resolveJsonModule": true,
19 | "strict": true,
20 | "jsx": "react-jsx"
21 | },
22 | "include": ["src"]
23 | }
24 |
--------------------------------------------------------------------------------
/vitest.config.mts:
--------------------------------------------------------------------------------
1 | ///
2 | import { defineConfig } from 'vite'
3 |
4 | export default defineConfig({
5 | test: {
6 | setupFiles: ['./test/setup.js'],
7 | environment: 'jsdom',
8 | coverage: {
9 | include: ['src'],
10 | },
11 | },
12 | })
13 |
--------------------------------------------------------------------------------
/www/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../.babelrc"
3 | }
4 |
--------------------------------------------------------------------------------
/www/.gitignore:
--------------------------------------------------------------------------------
1 | .cache/
2 | public/
3 |
--------------------------------------------------------------------------------
/www/gatsby-config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | pathPrefix: '/hooks',
5 | siteMetadata: {
6 | title: '@restart/hooks',
7 | author: 'Jason Quense',
8 | },
9 | plugins: [
10 | {
11 | resolve: '@docpocalypse/gatsby-theme',
12 | options: {
13 | sources: [`${__dirname}/../src`],
14 | getImportName(docNode) {
15 | return `import ${docNode.name} from '${docNode.packageName}/${docNode.name}'`
16 | },
17 | },
18 | },
19 | {
20 | resolve: 'gatsby-plugin-typedoc',
21 | options: {
22 | debugRaw: true,
23 | projects: [path.resolve(__dirname, '../src')],
24 | },
25 | },
26 | ],
27 | }
28 |
--------------------------------------------------------------------------------
/www/gatsby-node.js:
--------------------------------------------------------------------------------
1 | // Tells gatsby how to find the babel config for the src files as well as itself
2 | exports.onCreateBabelConfig = ({ actions }) => {
3 | actions.setBabelOptions({
4 | options: {
5 | babelrcRoots: true,
6 | },
7 | })
8 | }
9 |
--------------------------------------------------------------------------------
/www/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docs-site",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "start": "gatsby develop",
7 | "build": "gatsby build"
8 | },
9 | "dependencies": {
10 | "@docpocalypse/gatsby-theme": "^0.11.26",
11 | "gatsby": "^2.21.24",
12 | "gatsby-plugin-typedoc": "^0.3.11",
13 | "react": "^16.13.1",
14 | "react-dom": "^16.13.1"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/www/src/@docpocalypse/gatsby-theme/components/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-restart/hooks/961d4320a5227f8e9e848c578d0341aeaa177d45/www/src/@docpocalypse/gatsby-theme/components/.gitkeep
--------------------------------------------------------------------------------
/www/src/examples/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/react-restart/hooks/961d4320a5227f8e9e848c578d0341aeaa177d45/www/src/examples/.gitkeep
--------------------------------------------------------------------------------
/www/src/pages/index.mdx:
--------------------------------------------------------------------------------
1 | # Getting Started
2 |
3 | `@restart/hooks` is a utility library of React hooks. There is a hook for almost any use case.
4 | Try them all!
5 |
6 | ## Installation
7 |
8 | Install via your favorite package manager:
9 |
10 | ```sh
11 | npm install @restart/hooks
12 | ```
13 |
14 | ## Usage
15 |
16 | Check out the indivudal API docs for each hook for descriptions of what it does and
17 | how to use it.
18 |
--------------------------------------------------------------------------------
/www/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | theme: {
3 | extend: {
4 | colors: {
5 | primary: '#A93F55',
6 | black: '#19323C',
7 | accent: '#B2675E',
8 | subtle: '#EEE0CB',
9 | },
10 | },
11 | },
12 | }
13 |
--------------------------------------------------------------------------------
/www/templates/component.js:
--------------------------------------------------------------------------------
1 | export default () => null
2 |
--------------------------------------------------------------------------------