Mocking a promise inside useEffect with CRA, React Testing Library and Jest

Question

I am having an issue mocking a returned Promise using:

• Create React app
• Jest
• RTL

I have a file:

const books = [{
  id: 1,
  name: 'book'
}];

export const getBooks = () =>
  new Promise((res) => res(books));

I have a useEffect in my app:

export const App = () => {
  const [books, setBooks] = useState(undefined);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getBooks();
        setBooks(response);
      } catch (error) {
        setError("There seems to be an issue. Error:", error);
      }
    };
    fetchData();
  }, []);

  return (
    <div>
      {books &&
        books.map((book) => {
          return (
            <li key={book.id}>
              {book.name}
            </li>
          );
        })
      }
    </div>

I have a test:

import { App } from './App';
import { getBooks } from './books';

jest.mock('./books', () => ({
  getBooks: jest.fn(),
}));

getBlocks.mockReturnValue(() => Promise.resolve([{
  id: 1,
  name: 'mock book'
}]));

describe('App', () => {
  it('should render blocks', async () => {
    await render(<App />);
    expect(screen.getByText('mock book')).toBeInTheDocument();
  });
});

I just can't mock the return value! I can assert it's been called and I can console log the getBooks to see that it's mocked I just can't get any results. I also want to reject it so I can test the unhappy path but it won't work. Any ideas?

Answer 1

Few things:

1. You have a typo, it's not getBlocks but getBooks .
2. The await keyword is not necessary before rendering the component with render .
3. getBooks returns a promise that resolves with the value of books , yet when you're trying to mock it, you are making it return a function that returns a promise. Very different things.
4. You have to move the mocking to the test block in which it'll be used, or if you need this mocked value from getBooks on each one of your tests, you can move it inside a beforeEach hook. You can always override it for a specific test in which you are testing some edge case (eg an exception being thrown by the function, AKA "Unhappy path").
5. On the component's first render, books will be undefined , so you need to wait for the state to be updated. getByText query won't work, since it will immediately throw an error because it won't find the text you're expecting. You need to use the findByText query for this. It returns a promise that resolves when an element that matches the given query is found and rejects if the element is not found after the default timeout of 1000ms.
6. Since getBooks returns a promise, it makes more sense to use mockResolvedValue instead of mockReturnValue .

import { render, screen } from "@testing-library/react"
import { App } from "./App"
import { getBooks } from "./books"

jest.mock("./books", () => ({
  getBooks: jest.fn()
}))

describe("App", () => {
  it("should render blocks", async () => {
    getBooks.mockResolvedValueOnce([{ id: 1, name: "mock book" }])

    render(<App />)
    expect(await screen.findByText("mock book")).toBeInTheDocument()
  })
})

Answer 2

Try this:

jest.mock('./books', () => ({
  getBooks: jest.fn().mockReturnValue(() => Promise.resolve([{
    id: 1,
    name: 'mock book'
  }]));
}));