在 Jest 中模拟 @material-ui/pickers答案

【问题标题】：Mocking @material-ui/pickers in Jest在 Jest 中模拟 @material-ui/pickers
【发布时间】：2020-08-30 18:27:28
【问题描述】：

编辑：Non working repo with slightly different approach

我需要为我的测试模拟材料 UI 日期选择器（假设他们有自己的测试，所以我不需要测试它）。当我的测试文件中有一个模拟时，我设法启动并运行它，如下所示：

 jest.mock('@material-ui/pickers', () => {
     const actual = jest.requireActual('@material-ui/pickers');

     return {
         ...actual,
         DatePicker: (() => (props: any): JSX.Element => {
             return (
                 <input
                     data-testid="mockedDateField"
                     onChange={(e): void => {
                         props.onChange(e.target.value);
                     }}
                 />
             );
         })(),
     };
 });

但是，我想将其移至 __mocks__ 文件夹，这样我就不必在所有测试套件中重复上述代码块。 __mocks__ 文件夹是 node_modules 的同级文件夹。

为此，我使用以下块创建了__mocks__\@material-ui\pickers\index.js：

import React from 'react';

const actual = jest.requireActual('@material-ui/pickers');

const mockMaterialUiPickers = {
    ...actual,
    DatePicker: () => (props) => {
        return (
            <input
                data-testid="mockedDateField"
                onChange={(e) => {
                    props.onChange(e.target.value);
                }}
            />
        );
    },
};

export default mockMaterialUiPickers;

不幸的是，这似乎没有被正确接收。我已将jest.mock('@material-ui/pickers') 添加到我的test 文件中。然后使用以下

将其导入我的组件中

import { DatePicker } from '@material-ui/pickers';

我假设我的问题在于我的模拟路径，但是我无法弄清楚正确的路径是什么！

提前致谢。

【问题讨论】：

标签： reactjs unit-testing testing jestjs material-ui

【解决方案1】：

根据我阅读的here，您必须将模拟文件命名为__mocks__\@material-ui\pickers.js。

【讨论】：

【解决方案2】：

在我的例子中，使用下面的实现创建 src/__mocks__/@material-ui/pickers.tsxfile 可以解决问题（我使用的是 TypeScript，但我认为 JavaScript 实现会类似）：

import React from 'react';
import { DatePickerProps } from '@material-ui/pickers';

const actual = jest.requireActual('@material-ui/pickers');

export const MuiPickersUtilsProvider = actual.MuiPickersUtilsProvider;

export const DatePicker = (props: DatePickerProps) => (
  <input
    data-testid="mockedDateField"
    onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
      props.onChange(e.target.value);
    }}
  />
);

【讨论】：