类型错误：无法解构属性“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
    };
  }
}));

但是，我什至不想模拟小吃栏，因为我想测试每个特定场景（有多个）的实际显示消息。

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