无法 运行 在 React 打字稿中进行开玩笑测试。 Jest 遇到了意外的令牌

Unable to run jest tests in React typescript. Jest encountered an unexpected token

我选择了一个旧项目,我正在尝试对其进行 运行 开玩笑测试。

但我无能为力。错误如下:

portal: session.TP_P ?? "",
                        ^

SyntaxError: Unexpected token ?

  1 | import React from "react";
  2 | import { InputEmail, InputCommon, Button, SCFormSimple, SCForm, SCFormSimpleTitle, SCFormSimpleButtons, Column, TipoEnvio, CheckBoxCmps, getUrl, Modal } from "own-core-components";
> 3 | import { solicitante, emailSolicitante } from '../../helpers/session';
    | ^
  4 | 
  5 | export interface IProps {
  6 |   onHandleSubmit: Function;

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/components/from/FormTrafico.tsx:3:1)

而测试用例如下

import React from "react";
import {
  mount,
  shallow
} from "enzyme";
import FormTrafico from "../../components/from/FormTrafico"

describe('<FormTrafico />', () => {
  it("renders a Modal when modalCondTraf is true", () => {
    const wrapper = shallow(< FormTrafico />);
    wrapper.setProps({
      modalCondTraf: true
    })
    expect(wrapper.find(FormTrafico).exists()).toBe(true);
  })
})

要测试的文件的代码很长,但它是一个常见的基于 React class 的组件

import React from "react";
import { InputEmail, InputCommon, Button, SCFormSimple, SCForm, SCFormSimpleTitle, SCFormSimpleButtons, Column, TipoEnvio, CheckBoxCmps, getUrl, Modal } from "own-core-components";
import { solicitante, emailSolicitante } from '../../helpers/session';

export interface IProps {
  onHandleSubmit: Function;
  onChangeTipoEnvio?: Function
  codproductoUrgente?: any
  codproductoNormal?: any
  gestoriaData?: any;
  modalChange: Function;
};

export interface IState {
  paramsRequeridos?: any;
  paramsData?: any;
  modalCondTraf: boolean;
};

export default class FormTrafico extends React.PureComponent<IProps, IState> {
  constructor(props) {
    super(props);
    this.state = {
      paramsData: [],
      modalCondTraf: false,
      paramsRequeridos: {
        matricula: {
          forceValidacion: false
        },
        solicitante: {
          forceValidacion: false
        },
        email: {
          forceValidacion: false
        },
        politica: {
          forceValidacion: false
        }

      }
    }
  }


  componentDidMount() {
    this.handleDataForSubmit("isNormal", 0, false)
  }
  ///.......more code

我的 setupTets.js 看起来如下。我必须添加 matchMedia 块才能避免出现 matchMedia 错误

import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";
Enzyme.configure({
  adapter: new Adapter()
});

window.requestAnimationFrame =
  window.requestAnimationFrame ||
  function (callback) {
    setTimeout(callback, 0);
  };

window.scrollTo = () => "";

window.matchMedia = window.matchMedia || function () {
  return {
    matches: false,
    addListener: function () {},
    removeListener: function () {}
  };
};

我的 运行 测试脚本如下所示

 "test": "cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test --verbose false --transformIgnorePatterns \"node_modules/(?!(own-core-components))/\" --transformIgnorePatterns \"node_modules/(?!(ei-core-helpers))/\" ",

我正在使用以下版本

"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",

这是整个错误信息

Jest 遇到意外令牌

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config

option.

通过将节点更新到最新版本解决