如何在Jest測試中模擬babel插件？

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,
};

..在您的測試中，例如，使用酶 ：

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

Answer 2

這可能是不好的方式，可以通過將myHelper為global來實現。

// 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"
 }

如果您的要求更具體，請隨時發表評論。