Javascript 是否有一种快速方法可以自动模拟反应组件

我有大量react组件，需要一个简单的模拟版本

目前，对于每个组件，我必须创建一个新的模拟文件夹，然后为该组件创建一个文件，然后创建一个新的简化版本的组件

├── models
│   ├── __mocks__
│   │   └── componentA.js
│   │   └── componentB.js
│   │   └── componentC.js
│   └── componentA.js
│   └── componentB.js
│   └── componentC.js

我的每个模拟文件如下所示：

import React from 'react';

const ComponentA = ({
}) => (
  <div>
    Mocked ComponentA
  </div>
);
export default ComponentA;

它会导致大量额外的工作和重复的代码

是否有一种方法可以使用Jest automock工具自动实现上述功能

我尝试使用以下命令，但返回巴别塔错误：

const ReactCMock = (name) => ({
  __esModule: true,
  default: (props) => (
    <div className={name}>
      {name}
    </div>
  ),
});

jest.mock('./componentA', ReactCMock('Component A'));

---

错误：babel plugin jest Just:jest.mock的第二个参数必须是内联函数。

如果您只模拟默认导出，那么类似的方法应该可以工作：

jest.mock('./componentA', () => (props) => (
    <div className={name}>
      {name}
    </div>
));

---

如果您只是模拟默认导出，那么类似的方法应该可以工作：

jest.mock('./componentA', () => (props) => (
    <div className={name}>
      {name}
    </div>
));

尝试使用函数声明定义MockReactC see，以便在jest.mock调用之前将其提升，并将对MockReactC的调用包装在箭头函数中：

function MockReactC(name) {
  return {
    __esModule: true,
    default: (props) => (
      <div className={name}>
        {name}
      </div>
    ),
  };
}

jest.mock('./componentA', () => MockReactC('Component A'));

尝试使用函数声明定义MockReactC see，以便在jest.mock调用之前将其提升，并将对MockReactC的调用包装在箭头函数中：

function MockReactC(name) {
  return {
    __esModule: true,
    default: (props) => (
      <div className={name}>
        {name}
      </div>
    ),
  };
}

jest.mock('./componentA', () => MockReactC('Component A'));

---

模拟组件可以用React测试库使用的常规数据testid属性而不是className来识别。由于组件模块可能包含命名导出，因此帮助器可以提供以下选项：

const mockReactComp = (name, namedExports) => ({
  __esModule: true,
  default: (props) => (
    <div data-testid={name}>
      {name}
    </div>
  ),
  ...namedExports
});

---

模拟组件可以用React测试库使用的常规数据testid属性而不是className来识别。由于组件模块可能包含命名导出，因此帮助器可以提供以下选项：

const mockReactComp = (name, namedExports) => ({
  __esModule: true,
  default: (props) => (
    <div data-testid={name}>
      {name}
    </div>
  ),
  ...namedExports
});

---

这似乎也不起作用。第一个解决方案不能引用范围外变量ReactCMock，第二个解决方案给出了相同的笑话error@sam使用而不是开玩笑。您所描述的问题与您在此询问并得到回答的问题无关。@sam我修复了我的问题answer@PatrickRobertsdoMock对于顶级导入不可行，它没有被提升，因此不会影响它们。@EstusFlask问题中没有任何内容表明它是一个顶级导入开始…这似乎也不起作用。第一个解决方案不能引用范围外变量ReactCMock，第二个解决方案给出了相同的笑话error@sam使用而不是开玩笑。您所描述的问题与您在此询问并得到回答的问题无关。@sam我修复了我的问题answer@PatrickRobertsdoMock对于顶级导入不可行，它没有被提升，因此不会影响它们。@EstusFlask问题中没有任何内容表明它是一个顶级导入，首先是…明智地使用函数提升。应该是MockReactC，因为Jest在Jest.mock工厂中限制变量名。谢谢提示。开始觉得玩笑有太多的魔力了…非常感谢！模拟名称和使用函数而不是=>{}实现了这一点。唯一的问题是组件在快照中被称为默认组件。我可以通过在return语句之外定义默认组件来更改此设置，但无法将其设置为与名称匹配。@sam如果要将name变量作为显示名称传递，则可以使用默认值：function name youwant props{return…；}，但这不起作用。我找到了一个解决方法，它是在MockReactC内部单独定义函数，并编辑其显示名称。i、 e.MockedDefault=props=>。。。然后MockedDefault.displayName=name明智地使用函数。应该是MockReactC，因为Jest在Jest.mock工厂中限制变量名。谢谢提示。开始觉得玩笑有太多的魔力了…非常感谢！模拟名称和使用函数而不是=>{}实现了这一点。唯一的问题是组件在快照中被称为默认组件。我可以通过在return语句之外定义默认组件来更改此设置，但无法将其设置为与名称匹配。@sam如果要将name变量作为显示名称传递，则可以使用默认值：function name youwant props{return…；}，但这不起作用。我找到了一个解决方法，它是在MockReactC内部单独定义函数，并编辑其显示名称。i、 e.MockedDefault=props=>。。。然后MockedDefault.displayName=名称