Async hook testing about react-hooks-testing-library HOT 14 CLOSED

import fetch from 'node-fetch'
import { useFetch } from 'react-async'
import { renderHook, cleanup } from 'react-hooks-testing-library'

window.fetch = fetch

describe('useFetch tests', () => {
  afterEach(cleanup)

  test('should use fetch', (done) => {
    const { result, rerender } = renderHook(() =>
      useFetch(
        'https://swapi.co/api/people/1',
        { Accept: 'application/json' },
        {
          onResolve: () => {
            rerender()
            expect(result.current.isLoading).toBe(false)
            done()
          },
          onReject: () => {
            done.fail(new Error('request failed'))
          }
        }
      )
    )

    expect(result.current.isLoading).toBe(true)
  })
})

import "@testing-library/jest-dom"
import { renderHook, waitFor } from "@testing-library/react"
import { rest } from "msw"
import { setupServer } from "msw/node"

import useFetch from "./useFetch"

const pokemonEndpoint = jest.fn()

const handlers = [
    rest.get("https://pokeapi.co/api/v2/pokemon", pokemonEndpoint)
]

const server = setupServer(...handlers)

describe("The useFetch hook", () => {
    beforeAll(() => server.listen())

    afterAll(() => server.close())

    it("automatically fetches the given URL when called", async () => {
        const { result } = renderHook(() => useFetch("https://pokeapi.co/api/v2/pokemon"))
    
        await waitFor(() => expect(result.current.status).toBe("fetching"))
        expect(pokemonEndpoint).toHaveBeenCalled()
    })
})

test('should use fetch', async () => {
  const { result } = renderHook(() =>
    useFetch('https://swapi.co/api/people/1', { Accept: 'application/json' })
  )

  expect(result.current.isLoading).toBe(true)

  await result.waitForUpdate()

  expect(result.current.isLoading).toBe(false)
})

test('should use fetch', async () => {
  const { result, nextUpdate } = renderHook(() =>
    useFetch('https://swapi.co/api/people/1', { Accept: 'application/json' })
  )

  expect(result.current.isLoading).toBe(true)

  await nextUpdate()

  // may need to call `rerender` before `result.current` can updates, or perhaps `nextUpdate` can take care of that?
  expect(result.current.isLoading).toBe(false)
})

import fetch from 'node-fetch'
import { useFetch } from 'react-async'
import { renderHook, cleanup } from 'react-hooks-testing-library'

window.fetch = fetch

describe('useFetch tests', () => {
  afterEach(cleanup)

  test('should use fetch', (done) => {
    const { result, rerender } = renderHook(() =>
      useFetch('https://swapi.co/api/people/1', { Accept: 'application/json' })
    )

    expect(result.current.isLoading).toBe(true)

    result.onUpdate(() => {
      expect(result.current.isLoading).toBe(false)
      done()
    })
  })
})

import fetch from 'node-fetch'
import { useFetch } from 'react-async'
import { renderHook, cleanup } from 'react-hooks-testing-library'

window.fetch = fetch

describe('useFetch tests', () => {
  afterEach(cleanup)

  test('should use fetch', () => {
    const { result, rerender } = renderHook(() =>
      useFetch('https://swapi.co/api/people/1', { Accept: 'application/json' })
    )

    expect(result.current.isLoading).toBe(true)

    return result.waitForUpdate().then(() => {
      expect(result.current.isLoading).toBe(false)
    })
  })
})