tests: Add test for refetchInterval (#498)

* Add test for refetchInterval Close #405 * Trigger CI * avoid use snapshot Co-authored-by: Tanner Linsley <[email protected]>
TanStack · May 16, 2020 · c5b49be · c5b49be
1 parent 584932e
commit c5b49be
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/src/tests/suspense.test.js b/src/tests/suspense.test.js
@@ -1,4 +1,9 @@
-import { render, waitForElement, fireEvent, cleanup } from '@testing-library/react'
+import {
+  render,
+  waitForElement,
+  fireEvent,
+  cleanup,
+} from '@testing-library/react'
 import * as React from 'react'
 
 import { useQuery, ReactQueryCacheProvider, queryCache } from '../index'

diff --git a/src/tests/useQuery.test.js b/src/tests/useQuery.test.js
@@ -1,4 +1,11 @@
-import { render, act, waitForElement, fireEvent, cleanup } from '@testing-library/react'
+import {
+  render,
+  act,
+  waitForElement,
+  fireEvent,
+  cleanup,
+  waitForDomChange,
+} from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import * as React from 'react'
 
@@ -998,4 +1005,70 @@ describe('useQuery', () => {
 
     await waitForElement(() => rendered.getByText('rendered'))
   })
+
+  it('should update data upon interval changes', async () => {
+    let count = 0
+    function Page() {
+      const [int, setInt] = React.useState(200)
+      const { data } = useQuery('/api', () => count++, {
+        refetchInterval: int,
+      })
+      return (
+        <div onClick={() => setInt(num => (num < 400 ? num + 100 : 0))}>
+          count: {data}
+        </div>
+      )
+    }
+    const { container } = render(<Page />)
+    expect(container.firstChild.textContent).toEqual('count: ')
+    await waitForDomChange({ container }) // mount
+    expect(container.firstChild.textContent).toEqual('count: 0')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 210))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 1')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 50))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 1')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 150))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 2')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 200ms timer and setup a new 300ms timer
+      return new Promise(res => setTimeout(res, 200))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 2')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 3')
+    await act(() => {
+      // wait for new 300ms timer
+      return new Promise(res => setTimeout(res, 310))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 4')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 300ms timer and setup a new 400ms timer
+      return new Promise(res => setTimeout(res, 300))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 4')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+    await act(() => {
+      fireEvent.click(container.firstElementChild)
+      // it will clear 400ms timer and stop
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+    await act(() => {
+      return new Promise(res => setTimeout(res, 110))
+    })
+    expect(container.firstChild.textContent).toEqual('count: 5')
+  })
 })