Question

使用 jest 模拟小吃店

2020-07-22

6979

reactjs jestjs notistack

我尝试测试以下代码

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

如果我模拟完整的 notistack 对象

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

我收到一条错误消息：

TypeError：无法读取未定义的属性“enqueueSnackbar”

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

因为 useSnackbarRef 。

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

Answer 1

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

const mockEnqueue = jest.fn();

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

Answer 2

我使用 vite ，不使用钩子，而是直接使用处理程序。为了修复我的问题，我在 setup.ts 中调用了此方法：

beforeAll(() => {
  vi.mock("notistack", () => ({
    enqueueSnackbar: vi.fn(),
    closeSnackbar: vi.fn(),
  }));
});