Testing state updations in an async method via React Testing Library

Question

I have made a dummy component for the purpose of illustration. Please find the code below-

Fetch.js

import React from "react";
import { useFetch } from "./useFetch";

const FetchPost = () => {
  const { toShow, dummyAPICall } = useFetch();
  return toShow ? (
    <>
      <button onClick={dummyAPICall} data-testid="fetch-result">
        Fetch
      </button>
    </>
  ) : null;
};

export { FetchPost };

useFetch.js

import { useState } from "react";

const useFetch = () => {
  const [toShow, setToShow] = useState(true);
  const dummyAPICall = () => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        setToShow(false);
      })
      .catch(() => {
        setToShow(true);
      });
  };
  return {
    toShow,
    setToShow,
    dummyAPICall,
  };
};

export { useFetch };

I want to make an assertion here, that on click of the Fetch button my Fetch component shouldn't render on screen so, using React Testing Library, I am writing the test case like this:

import { fireEvent, render, screen } from "@testing-library/react";
import { FetchPost } from "../Fetch";
import { useFetch } from "../useFetch";

jest.mock("../useCounter");

describe("Use Fetch tests", () => {
  it("Should fetch results and show/hide component", async () => {
    useFetch.mockImplementation(() => {
      return { toShow: true, dummyAPICall: jest.fn() };
    });
    render(<FetchPost></FetchPost>);
    expect(screen.getByText(/fetch/i)).toBeInTheDocument();
    fireEvent.click(screen.getByTestId("fetch-result"));
    await waitFor(() =>
      expect(screen.queryByText(/fetch/i)).not.toBeInTheDocument()
    );
  });
});

My assertion:

expect(screen.getByText(/fetch/i)).not.toBeInTheDocument(); 

is failing as the component is still present. How can I modify my test case to handle this?

Answer 1

Mock network IO side effect is better than mock useFetch hook. It seems you forget to import waitFor helper function from RTL package.

There are two options to mock network IO side effects.

1. msw, here is example
2. global.fetch = jest.fn(), don't need to install additional package and set up.

I am going to use option 2 to solve your question.

E.g.

fetch.jsx:

import React from 'react';
import { useFetch } from './useFetch';

const FetchPost = () => {
  const { toShow, dummyAPICall } = useFetch();

  return toShow ? (
    <>
      <button onClick={dummyAPICall} data-testid="fetch-result">
        Fetch
      </button>
    </>
  ) : null;
};

export { FetchPost };

useFetch.js:

import { useState } from 'react';

const useFetch = () => {
  const [toShow, setToShow] = useState(true);
  const dummyAPICall = () => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((json) => {
        setToShow(false);
      })
      .catch(() => {
        setToShow(true);
      });
  };
  return { toShow, setToShow, dummyAPICall };
};

export { useFetch };

fetch.test.jsx:

import React from 'react';
import { FetchPost } from './fetch';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';

describe('Use Fetch tests', () => {
  it('Should fetch results and show/hide component', async () => {
    const mResponse = { json: jest.fn() };
    global.fetch = jest.fn().mockResolvedValueOnce(mResponse);
    render(<FetchPost />);
    expect(screen.getByText(/fetch/i)).toBeInTheDocument();
    fireEvent.click(screen.getByTestId('fetch-result'));
    await waitFor(() => expect(screen.queryByText(/fetch/i)).not.toBeInTheDocument());
  });
});

Test result:

 PASS  examples/70666232/fetch.test.jsx (12.699 s)
  Use Fetch tests
    ✓ Should fetch results and show/hide component (51 ms)

-------------|---------|----------|---------|---------|-------------------
File         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-------------|---------|----------|---------|---------|-------------------
All files    |   93.75 |      100 |   83.33 |   93.75 |                   
 fetch.jsx   |     100 |      100 |     100 |     100 |                   
 useFetch.js |      90 |      100 |      80 |      90 | 12                
-------------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.38 s

package version:

"@testing-library/react": "^11.2.2",
"@testing-library/jest-dom": "^5.11.6",
"jest": "^26.6.3",
"react": "^16.14.0"