Question

我有大量的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自动模拟工具自动实现上述功能。

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

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

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

错误：babel-plugin-jest-hoist: The second argument of `jest.mock` must be an inline function.

Answer 1

尝试使用MockReactC声明定义function（请参见the comment below），以便在jest.mock()调用之前将其吊起，并将调用包装到MockReactC()中箭头功能：

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

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

Answer 2

可以使用React Testing库使用的常规data-testid属性而不是className来标识模拟的组件。由于组件模块可能包含命名输出，因此帮助程序可以提供以下选项：

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

jest.mock的局限性在于，应在工厂函数内部使用辅助程序，并在其后缀为mock。

这样的通用帮助程序可以从测试之间共享中受益。这需要将帮助程序导入放在首位。 jest.mock悬挂在进口之上：

import mockReactComp from './mock-react-comp';
// jest.mock('./componentA', ...) is hoisted here, mockReactComp is available
import ComponentA from './componentA';
jest.mock('./componentA', () => mockReactComp('ComponentA'));

Answer 3

如果您仅模拟默认导出，则应该可以执行以下操作：

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

有没有一种快速自动反应组件的方法

3 个答案: