test: refactor tests for configs

test/use-swr-configs.test.tsx

@@ -6,6 +6,7 @@ import { sleep } from './utils'
 describe('useSWR - configs', () => {
   it('should read the config fallback from the context', async () => {
     let value = 0
+    const INTERVAL = 10
     const fetcher = () => value++
 
     function Section() {
@@ -16,20 +17,21 @@ describe('useSWR - configs', () => {
       // config provider
       return (
         <SWRConfig
-          value={{ fetcher, refreshInterval: 100, dedupingInterval: 0 }}
+          value={{ fetcher, refreshInterval: INTERVAL, dedupingInterval: 0 }}
         >
           <Section />
         </SWRConfig>
       )
     }
-    const { container } = render(<Page />)
-
+    render(<Page />)
     // hydration
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: "`)
+    screen.getByText('data:')
     // mount
     await screen.findByText('data: 0')
-    await act(() => sleep(110)) // update
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+
+    // wait for the refresh interval
+    await act(() => sleep(INTERVAL * 1.5))
+    screen.getByText('data: 1')
   })
 
   it('should stop revalidations when config.isPaused returns true', async () => {
@@ -45,7 +47,7 @@ describe('useSWR - configs', () => {
       const [paused, setPaused] = useState(false)
       const { data, error } = useSWR(key, fetcher, {
         revalidateOnMount: true,
-        refreshInterval: 200,
+        refreshInterval: 1,
         isPaused() {
           return paused
         }
@@ -62,23 +64,28 @@ describe('useSWR - configs', () => {
         </div>
       )
     }
-    const { container } = render(<Page />)
 
+    render(<Page />)
     await screen.findByText('data: 0')
-    await act(async () => await 0)
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
-    revalidate()
-    await act(async () => await 0)
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
-    revalidate()
-    fireEvent.click(container.firstElementChild)
-    await act(async () => await 0)
-    revalidate()
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 0"`)
-    await act(async () => await 0)
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
-    fireEvent.click(container.firstElementChild)
-    await act(async () => sleep(400))
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data: 1"`)
+
+    // should not be revalidated
+    await act(() => revalidate())
+    screen.getByText('data: 0')
+    await act(() => revalidate())
+    screen.getByText('data: 0')
+
+    // enable isPaused
+    fireEvent.click(screen.getByText('data: 0'))
+    // should be revalidated
+    await act(() => revalidate())
+    screen.getByText('data: 1')
+
+    // disable isPaused
+    fireEvent.click(screen.getByText('data: 1'))
+    // should not be revalidated
+    await act(() => revalidate())
+    screen.getByText('data: 1')
+    await act(() => revalidate())
+    screen.getByText('data: 1')
   })
 })

test/use-swr-context-config.test.tsx

@@ -1,29 +1,24 @@
-import { act, render } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import React from 'react'
 import useSWR, { mutate } from '../src'
-import { sleep } from './utils'
+import { createResponse } from './utils'
 
 describe('useSWR - context configs', () => {
   it('mutate before mount should not block rerender', async () => {
-    const prefetch = () => Promise.resolve('prefetch-data')
-    const fetcher = () =>
-      new Promise(resolve => {
-        setTimeout(() => resolve('data'), 100)
-      })
+    const prefetch = () => createResponse('prefetch-data')
+    const fetcher = () => createResponse('data')
     await act(() => mutate('prefetch', prefetch))
 
     function Page() {
       const { data } = useSWR('prefetch', fetcher)
       return <div>{data}</div>
     }
 
-    const { container } = render(<Page />)
+    render(<Page />)
+    // render with the prefetched data
+    screen.getByText('prefetch-data')
 
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(
-      `"prefetch-data"`
-    )
-
-    await act(() => sleep(150))
-    expect(container.firstChild.textContent).toMatchInlineSnapshot(`"data"`)
+    // render the fetched data
+    await screen.findByText('data')
   })
 })