标签: notistack

我正在尝试使用 notistack 库中的 useSnack 钩子，但我不断收到此错误

类型错误：无法解构 'Object(...)(...)' 的属性 'enqueueSnackbar'，因为它未定义。

这是代码：

import React, { useContext, useEffect } from "react";
import AlertContext from "../context/alert/alertContext";
import { SnackbarProvider, useSnackbar } from "notistack";

const Alerts = (props) => {
  const alertContext = useContext(AlertContext);
  // This line below is where the error seems to be
  const { enqueueSnackbar } = useSnackbar();
  useEffect(() => {
    alertContext.msg !== "" &&
      enqueueSnackbar(alertContext.msg, {
        variant: alertContext.type,
      });
  }, [alertContext]);
  return <SnackbarProvider maxSnack={4}>{props.children}</SnackbarProvider>;
};

export default Alerts;

我尝试测试以下代码

import { useSnackbar, VariantType, WithSnackbarProps } from 'notistack';
import React from 'react';

interface IProps {
  setUseSnackbarRef: (showSnackbar: WithSnackbarProps) => void;
}

const InnerSnackbarUtilsConfigurator: React.FC<IProps> = (props: IProps) => {
  props.setUseSnackbarRef(useSnackbar());
  return null;
};

let useSnackbarRef: WithSnackbarProps;
const setUseSnackbarRef = (useSnackbarRefProp: WithSnackbarProps) => {
  useSnackbarRef = useSnackbarRefProp;
};

export const SnackbarUtilsConfigurator = () =>
  <InnerSnackbarUtilsConfigurator setUseSnackbarRef={setUseSnackbarRef} />;

export default {
  success(msg: string) {
    this.toast(msg, 'success');
  },
  warning(msg: string) {
    this.toast(msg, 'warning');
  },
  info(msg: string) {
    this.toast(msg, 'info');
  },
  error(msg: string) …

我有一个 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 …

默认背景颜色是白色，但我想将其更改为深色。

mui v5 中启用了深色模式。

我已经找到了更改错误、信息等的方法，但我想做的是更改默认背景颜色而不指定任何变体。

// _app.tsx
<SnackbarProvider maxSnack={3}>
  <Component {...pageProps} />
</SnackbarProvider>

这就是notstack的实现方式。