无法 运行 在 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.
通过将节点更新到最新版本解决
我选择了一个旧项目,我正在尝试对其进行 运行 开玩笑测试。
但我无能为力。错误如下:
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.
通过将节点更新到最新版本解决