如何在使用 jest 的测试期间导入模块？答案

【问题标题】：How to import modules during tests using jest?如何在使用 jest 的测试期间导入模块？
【发布时间】：2020-06-05 07:35:53
【问题描述】：

我正在使用 React、Enzyme 和 Jest。这是我的连接组件，它只呈现一个按钮

import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';

import PlaidLinkButton from 'react-plaid-link-button';


const plaidEnv = process.env.REACT_APP_PLAID_ENV

export class ConnectStep extends Component {

  handleOnSuccessBroker = async (token, metadata) => {
    //unimportant
  };

  render() {
    const { classes } = this.props;
    return (
        <PlaidLinkButton
          buttonProps={{
            className: classes.connectButton,
            id: 'button',
          }}
          plaidLinkProps={{
            clientName: '###',
            key: '###',
            env: plaidEnv,
            product: ['transactions'],
            onSuccess: this.handleOnSuccessBroker,
            token: ''
          }}
        >
          {this.props.plaid.accounts.length > 0 ? 'CONNECTED' : 'Start'}
            </PlaidLinkButton>
    );
  }
}

如您所见，我正在导入 PlaidLinkButton 但开玩笑抛出此错误：


    ###/node_modules/react-plaid-link-button/dist/react-plaid-link-button/react-plaid-link-button.js:19
    import PropTypes from 'prop-types';
           ^^^^^^^^^

    SyntaxError: Unexpected identifier

      4 | 
      5 | import { setPlaid } from '../../../actions/actions';
    > 6 | import PlaidLinkButton from 'react-plaid-link-button';

我错过了什么？我为也导入模块的其他组件制作了成功的测试套件。但是这个特别给我带来了问题。

【问题讨论】：

为什么需要将 PlaidLinkButton 导入到测试中？你不只是浅渲染ConnectStep吗？我也想看看整个测试文件
我不需要这是我试图避免的。我确实是浅渲染。这就是我无法弄清楚这个错误的原因。

标签： javascript reactjs jestjs jsx enzyme

【解决方案1】：

    import PropTypes from 'prop-types';
           ^^^^^^^^^

    SyntaxError: Unexpected identifier

这可能是与您的 Jest/Babel 配置相关的问题，因为模块没有正确编译。您需要删除将 Babel 选项 modules 设置为 false 的任何位置。

【讨论】：

我认为你对我所读的内容是正确的，但我找不到 Babel 配置的位置。我正在使用 create-react-app。
只要确定……你使用的是什么版本的 react-scripts？
另外，如果您对其进行了任何更改，请在此处包含您的 package.json。