使用 jest 模拟小吃店

Question

我尝试测试以下代码

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) {
    this.toast(msg, 'error');
  },
  toast(msg: string, variant: VariantType = 'default') {
    useSnackbarRef.enqueueSnackbar(msg, { variant });
  },
};

如果我模拟完整的 notstack 对象

import React from "react";
import {render as testingRender} from '@testing-library/react';
import { SnackbarProvider} from 'notistack';
import SnackbarUtils,{SnackbarUtilsConfigurator} from './SnackbarUtils';

jest.mock('notistack');

beforeEach(() =>{

});

it('DownloadDialog renders correctly - open=true', async () => {
    const component = await  testingRender(<SnackbarProvider maxSnack={3}><SnackbarUtilsConfigurator /></SnackbarProvider>);
    SnackbarUtils.success("success");
});

我收到一条错误消息：

类型错误：无法读取未定义的属性“enqueueSnackbar”

  33 |   },
  34 |   toast(msg: string, variant: VariantType = 'default') {
> 35 |     useSnackbarRef.enqueueSnackbar(msg, { variant });
     |                    ^
  36 |   },
  37 | };

因为useSnackbarRef。

我如何才能仅模拟useSnackbar的方法notitstack，以便我可以检查是否enqueueSnackbar使用正确的值调用？

Answer 1

这对我有用。将其放在所有测试之外（顶级范围）：

const mockEnqueue = jest.fn();

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