如何在 Jest 测试中模拟 babel 插件？答案

【问题标题】：How to mock babel plugin in Jest test?如何在 Jest 测试中模拟 babel 插件？
【发布时间】：2017-11-13 17:35:52
【问题描述】：

我正在使用一个 babel 插件，它提供了一个名为 myHelper 的函数，该函数在我要测试的组件中使用（但由于它是作为 babel 插件提供的，所以没有导入）。

如何使用 Jest“全局”模拟 myHelper？

【问题讨论】：

你能为此提供一个示例 git repo 吗？
请始终提供代码示例，说明您如何在代码中使用MyHelper

标签： javascript unit-testing testing mocking jestjs

【解决方案1】：

我会让这些组件接受myHelper 属性来选择性地模拟babel 提供的myHelper 方法。默认情况下，该属性将指向原始的 myHelper 方法：

class MyComponent extends Component {
  constructor() {
      // Use myHelper function like:
      this.props.myHelper();
  }

  return (
    <div>...</div>
  );
}

MyComponent.propTypes = {
  myHelper: PropTypes.func.isRequired,
};

MyComponent.defaultProps = {
  // set by default to babel-provided method
  myHelper: myHelper,
};

..在你的测试中使用，例如，enzyme:

const myHelperMock = jest.fn();
const wrapper = shallow(
    <MyComponent
      myHelper={myHelperMock}
    />
);

【讨论】：

【解决方案2】：

这可能是一种不好的方式，可以通过将myHelper 设置为全局。

// myHelper.js
function myHelper(){
    return work() // expected 1
}
if (global) {
    global.myHelperFunction = myHelper;
}

// myHelper.test.js
test('TEST MY HELPER', () => {
    expect(global.myHelperFunction()).toBe(1);
})

【讨论】：

【解决方案3】：

我看到了你可以去的两个方向： - 使助手全局可用并测试您的代码如何与之交互 - 通过babel-jest 提供帮助程序并相应地编写您的测试

第一个可以使用 jest 配置中的 setupFiles 字段来实现：它允许您指定要在运行测试之前执行的脚本数组。您可以在其中之一中全局创建您的助手。

第二个可以通过在 jest 配置中指定 transform 来实现。像

 "transform": {
    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest"
 }

如果您的要求更具体，请随时发表评论。

【讨论】：