TypeError：无法解构属性'enqueueSnackbar'

Question

我有一个 Jest 单元测试，测试了一个模拟的 API 调用错误，以确保错误消息显示在页面上。在我的实际文件中，我使用 notistack 来显示错误消息。由于我认为不相关，所以我没有显示完整的 API 请求，简要说明如下：

myComponent.js:

import { useSnackbar } from 'notistack';

const myComponent = props => {
  const { enqueueSnackbar } = useSnackbar()

  //make an API call to an endpoint
  ...
  if (response.ok) enqueueSnackbar("API Success", { variant: "success" });
  else enqueueSnackbar("API Failed", { variant: "error" });
}

由于这个原因，我正在我的单元测试中对上述内容进行测试。再次说明，我不会粘贴整个单元测试，因为我认为这并不相关，但类似于以下内容： myComponent.test.js

import { render, screen } from "@testing-library/react"

test("testing error message on API call", async () => {
  // mock the API call to return a 500 <- this works fine

  render(<myComponent />)

  // ensure that the error message is displayed in the screen
  expect(screen.queryByText(/API Failed/)).toBeInTheDocument();
});

上述操作会报错：

TypeError：无法对`(0 , _notistack.useSnackbar)(...)的` 'enqueueSnackbar' 进行析构，因为它未定义

如果只是简单地添加以下内容，enqueueSnackbar() 将被定义，但测试仍然会失败，因为消息为null.

const mockEnqueue = jest.fn();

jest.mock('notistack', () => ({
  ...jest.requireActual('notistack'),
  useSnackbar: () => {
    return {
      enqueueSnackbar: mockEnqueue
    };
  }
}));

然而，我甚至不想嘲笑 snackbar，因为我想测试每种具体情况下实际显示的消息（有多种情况）。

- Adam

Answer 1

将我的单元测试中的render()包装在SnackbarProvider中解决了这个问题。

import { SnackbarProvider } from "notistack"
import { render, screen } from "@testing-library/react"

test("testing error message on API call", async () => {
  /* mock the API call to return a 500 <- this works fine */

  render(
    <SnackbarProvider>
      <myComponent />
    </SnackbarProvider>
  )

  /* ensure that the error message is displayed in the screen */
  expect(screen.queryByText(/API Failed/)).toBeInTheDocument();
});

- Adam