Question

我正在使用一个babel插件，它提供了一个名为myHelper的函数，该函数在我想要测试的组件中使用（但不导入，因为它是作为babel插件提供的）。

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

Answer 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}
    />
);

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

Answer 3

我看到你可以去的两个方向： - 使帮助程序在全局范围内可用，并测试代码与其交互的方式 - 通过babel-jest提供帮助，并相应地编写测试

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

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

这样的东西

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

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

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

3 个答案: