From 5c73084708a1c96c5b5158598587e7b776f73b00 Mon Sep 17 00:00:00 2001 From: Yixuan Xu Date: Fri, 15 May 2020 22:33:26 +0800 Subject: [PATCH 1/3] Add test for refetchInterval Close #405 --- src/tests/useQuery.test.js | 75 +++++++++++++++++++++++++++++++++++++- 1 file changed, 74 insertions(+), 1 deletion(-) diff --git a/src/tests/useQuery.test.js b/src/tests/useQuery.test.js index 2cd95d879f..f16571959b 100644 --- a/src/tests/useQuery.test.js +++ b/src/tests/useQuery.test.js @@ -1,4 +1,10 @@ -import { render, act, waitForElement, fireEvent } from '@testing-library/react' +import { + render, + act, + waitForElement, + fireEvent, + waitForDomChange, +} from '@testing-library/react' import { ErrorBoundary } from 'react-error-boundary' import * as React from 'react' @@ -865,4 +871,71 @@ 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 ( +
setInt(num => (num < 400 ? num + 100 : 0))}> + count: {data} +
+ ) + } + const { container } = render() + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: "`) + + await waitForDomChange({ container }) // mount + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 0"`) + await act(() => { + return new Promise(res => setTimeout(res, 210)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 1"`) + await act(() => { + return new Promise(res => setTimeout(res, 50)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 1"`) + await act(() => { + return new Promise(res => setTimeout(res, 150)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"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).toMatchInlineSnapshot(`"count: 2"`) + await act(() => { + return new Promise(res => setTimeout(res, 110)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 3"`) + await act(() => { + // wait for new 300ms timer + return new Promise(res => setTimeout(res, 310)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"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).toMatchInlineSnapshot(`"count: 4"`) + await act(() => { + return new Promise(res => setTimeout(res, 110)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"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).toMatchInlineSnapshot(`"count: 5"`) + await act(() => { + return new Promise(res => setTimeout(res, 110)) + }) + expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 5"`) + }) }) From e65603332c5fd2c8090d9bcc047f6727e034f22c Mon Sep 17 00:00:00 2001 From: Yixuan Xu Date: Fri, 15 May 2020 22:41:32 +0800 Subject: [PATCH 2/3] Trigger CI From b76a4ea3c193ff3d21d6a852c86bca354b1680fc Mon Sep 17 00:00:00 2001 From: Yixuan Xu Date: Sat, 16 May 2020 08:04:43 +0800 Subject: [PATCH 3/3] avoid use snapshot --- src/tests/suspense.test.js | 7 ++++++- src/tests/useQuery.test.js | 34 ++++++++++++++++++++-------------- 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/src/tests/suspense.test.js b/src/tests/suspense.test.js index e3904a10fb..c7f95f899f 100644 --- 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 index 3efdd0a944..84c20e5130 100644 --- a/src/tests/useQuery.test.js +++ b/src/tests/useQuery.test.js @@ -1,4 +1,11 @@ -import { render, act, waitForElement, fireEvent, cleanup, waitForDomChange } 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' @@ -1013,56 +1020,55 @@ describe('useQuery', () => { ) } const { container } = render() - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: "`) - + expect(container.firstChild.textContent).toEqual('count: ') await waitForDomChange({ container }) // mount - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 0"`) + expect(container.firstChild.textContent).toEqual('count: 0') await act(() => { return new Promise(res => setTimeout(res, 210)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 1"`) + expect(container.firstChild.textContent).toEqual('count: 1') await act(() => { return new Promise(res => setTimeout(res, 50)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 1"`) + expect(container.firstChild.textContent).toEqual('count: 1') await act(() => { return new Promise(res => setTimeout(res, 150)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 2"`) + 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).toMatchInlineSnapshot(`"count: 2"`) + expect(container.firstChild.textContent).toEqual('count: 2') await act(() => { return new Promise(res => setTimeout(res, 110)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 3"`) + 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).toMatchInlineSnapshot(`"count: 4"`) + 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).toMatchInlineSnapshot(`"count: 4"`) + expect(container.firstChild.textContent).toEqual('count: 4') await act(() => { return new Promise(res => setTimeout(res, 110)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 5"`) + 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).toMatchInlineSnapshot(`"count: 5"`) + expect(container.firstChild.textContent).toEqual('count: 5') await act(() => { return new Promise(res => setTimeout(res, 110)) }) - expect(container.firstChild.textContent).toMatchInlineSnapshot(`"count: 5"`) + expect(container.firstChild.textContent).toEqual('count: 5') }) })