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

Question

我有一个问题 mocking 返回Promise使用：

• 创建 React 应用
• 笑话
• 实时语言

我有一个文件：

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

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

我的应用程序中有一个useEffect ：

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>

我有一个测试：

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();
  });
});

我只是不能嘲笑返回值！ 我可以断言它已被调用并且我可以控制台记录getBooks以查看它是否被模拟我只是无法获得任何结果。 我也想拒绝它，这样我就可以测试不愉快的路径，但它不会起作用。 有任何想法吗？

Answer 1

一些事情：

1. 你打错了，不是getBlocks而是getBooks 。
2. 在使用render渲染组件之前不需要await关键字。
3. getBooks返回一个 promise，它用books的值解析，但是当你试图模拟它时，你正在让它返回一个function ，它返回一个 promise。非常不同的东西。
4. 您必须将 mocking 移动到将在其中使用它的测试块，或者如果您在每个测试中都需要来自getBooks的模拟值，则可以将它移动到beforeEach挂钩中。 您始终可以针对正在测试某些边缘情况的特定测试覆盖它（例如，function 抛出的异常，也称为“不快乐路径”）。
5. 在组件的第一次渲染中， books将是undefined ，因此您需要等待 state 更新。 getByText查询将不起作用，因为它会立即抛出错误，因为它找不到您期望的文本。 您需要为此使用findByText查询。 它返回一个 promise，当找到与给定查询匹配的元素时解析，如果在默认超时 1000 毫秒后未找到该元素，则拒绝。
6. 由于getBooks返回 promise，因此使用mockResolvedValue而不是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

尝试这个：

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