TypeError: Cannot destructure property '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: Cannot destructure property 'enqueueSnackbar' of '(0 , _notistack.useSnackbar)(...)' as it is undefined

如果我简单地包含如下内容，将定义 enqueueSnackbar() 但测试仍然失败，因为消息是 null.

const mockEnqueue = jest.fn();

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

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

Answer 1

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

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

TypeError: Cannot destructure property 'enqueueSnackbar'

TypeError: Cannot destructure property 'enqueueSnackbar'

javascript

unit-testing

reactjs

jestjs

notistack