test: fix flaky tests for focus and location mutation (#944)

* test: fix flaky tests in use-swr-focus.text.tsx * test: fix flaky tests in use-swr-local-mutation.test.tsx * test: create a waitForDedupingInterval function for sleep(1) * test: revert unnecessary change
vercel · Feb 2, 2021 · ef47355 · ef47355
1 parent d8bd074
commit ef47355
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 68 deletions.
diff --git a/test/use-swr-focus.test.tsx b/test/use-swr-focus.test.tsx
@@ -3,6 +3,8 @@ import React, { useState } from 'react'
 import useSWR from '../src'
 import { sleep } from './utils'
 
+const waitForDedupingInterval = async () => await act(() => sleep(1))
+
 describe('useSWR - focus', () => {
   it('should revalidate on focus by default', async () => {
     let value = 0
@@ -20,7 +22,7 @@ describe('useSWR - focus', () => {
     // mount
     await screen.findByText('data: 0')
 
-    await act(() => sleep(1))
+    await waitForDedupingInterval()
     // trigger revalidation
     fireEvent.focus(window)
     await screen.findByText('data: 1')
@@ -42,11 +44,11 @@ describe('useSWR - focus', () => {
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: "`)
     // mount
     await screen.findByText('data: 0')
+
+    await waitForDedupingInterval()
     // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
+    // should not be revalidated
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
   })
   it('revalidateOnFocus shoule be stateful', async () => {
@@ -68,44 +70,30 @@ describe('useSWR - focus', () => {
     // mount
     await screen.findByText('data: 0')
 
-    await act(() => sleep(1))
-
+    await waitForDedupingInterval()
     // trigger revalidation
     fireEvent.focus(window)
-
-    await act(() => {
-      return sleep(1)
-    })
     // data should not change
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
 
-    await act(() => sleep(1))
     // change revalidateOnFocus to true
     fireEvent.click(container.firstElementChild)
     // trigger revalidation
     fireEvent.focus(window)
-
-    await act(() => {
-      return sleep(1)
-    })
     // data should update
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+    await screen.findByText('data: 1')
+
+    await waitForDedupingInterval()
     // trigger revalidation
     fireEvent.focus(window)
-
-    await act(() => {
-      return sleep(1)
-    })
     // data should update
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 2"`)
+    await screen.findByText('data: 2')
 
+    await waitForDedupingInterval()
     // change revalidateOnFocus to false
     fireEvent.click(container.firstElementChild)
     // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
     // data should not change
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 2"`)
   })
@@ -120,7 +108,7 @@ describe('useSWR - focus', () => {
         {
           dedupingInterval: 0,
           revalidateOnFocus: true,
-          focusThrottleInterval: 200
+          focusThrottleInterval: 50
         }
       )
       return <div>data: {data}</div>
@@ -131,30 +119,28 @@ describe('useSWR - focus', () => {
     expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: "`)
     // mount
     await screen.findByText('data: 0')
+
+    await waitForDedupingInterval()
     // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
+    // still in throttling interval
+    await act(() => sleep(20))
+    // should be throttled
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(210)
-    })
+    await screen.findByText('data: 1')
+    // wait for focusThrottleInterval
+    await act(() => sleep(100))
 
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+    // trigger revalidation again
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
-
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 2"`)
+    await screen.findByText('data: 2')
   })
 
   it('focusThrottleInterval should be stateful', async () => {
     let value = 0
 
     function Page() {
-      const [focusThrottleInterval, setInterval] = useState(200)
+      const [focusThrottleInterval, setInterval] = useState(50)
       const { data } = useSWR(
         'focusThrottleInterval should be stateful',
         () => value++,
@@ -173,40 +159,36 @@ describe('useSWR - focus', () => {
     // mount
     await screen.findByText('data: 0')
 
+    await waitForDedupingInterval()
+    // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(210)
-    })
+    // wait for throttle interval
+    await act(() => sleep(100))
+    // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(210)
-    })
+    await screen.findByText('data: 2')
 
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 2"`)
+    await waitForDedupingInterval()
+    // increase focusThrottleInterval
     fireEvent.click(container.firstElementChild)
+    // wait for throttle interval
+    await act(() => sleep(100))
+    // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
+    // wait for throttle interval
+    await act(() => sleep(100))
+    // should be throttled
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(210)
-    })
-
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 3"`)
+    await screen.findByText('data: 3')
 
-    await act(() => {
-      return sleep(100)
-    })
+    // wait for throttle interval
+    await act(() => sleep(150))
+    // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(310)
-    })
+    // wait for throttle intervals
+    await act(() => sleep(150))
+    // trigger revalidation
     fireEvent.focus(window)
-    await act(() => {
-      return sleep(1)
-    })
-
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 5"`)
+    await screen.findByText('data: 5')
   })
 })
diff --git a/test/use-swr-local-mutation.test.tsx b/test/use-swr-local-mutation.test.tsx
@@ -178,10 +178,11 @@ describe('useSWR - local mutation', () => {
 
     // hydration
     expect(container.textContent).toMatchInlineSnapshot(`"data: "`)
-
     //mount
     await screen.findByText('data: 0')
 
+    // wait for dedupingInterval
+    await act(() => sleep(1))
     await act(() => {
       // mutate and revalidate
       return mutate(
@@ -190,9 +191,7 @@ describe('useSWR - local mutation', () => {
         false
       )
     })
-    await act(() => sleep(110))
-
-    expect(container.textContent).toMatchInlineSnapshot(`"data: 999"`)
+    await screen.findByText('data: 999')
   })
 
   it('should trigger on mutation without data', async () => {