[英]Jest encountered an unexpected token React
This is screenshot of error: 这是错误的屏幕截图:
I have 2 tests, the first one is working alright: sum.js : 我有2个测试,第一个正常工作:sum.js:
function sum(a, b) {
return a + b;
}
module.exports = sum;
sum.test.js sum.test.js
const sum = require('./sum');
test('adds 2 + 5 to equal 7', () => {
expect(sum(2, 5)).toBe(7);
});
it works okay, prints message in console. 它工作正常,在控制台中打印消息。
the second one (I dont sure) is set by default by create-react-app 第二个(我不确定)默认由create-react-app设置
App.test.js : App.test.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});
App.js : App.js:
import React, { Component } from 'react';
import {HashRouter} from "react-router-dom";
import Routes from './routes';
import Alerts from './app/components/alerts';
import Navbar from '../src/app/navbar/navbar'
import Auth from './app/settings/auth';
import Register from './app/entities/user/modify-modal';
import './index.scss';
class App extends Component {
componentWillMount(){
}
render() {
return (
<HashRouter>
<>
<Auth></Auth>
<Navbar></Navbar>
<Alerts></Alerts>
<Register/>
<div className={"content-root"}>
<Routes/>
</div>
</>
</HashRouter>
);
}
}
export default App;
package.json 的package.json
{
"name": "x5_r_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/cli": "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@fortawesome/fontawesome-free": "^5.7.1",
"@fortawesome/fontawesome-svg-core": "^1.2.12",
"@fortawesome/free-solid-svg-icons": "^5.6.3",
"@fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"bootstrap": "^4.2.1",
"jest": "^24.5.0",
"jest-cli": "^24.5.0",
"jsdom": "^14.0.0",
"moment": "^2.23.0",
"node-sass": "^4.11.0",
"react": "^16.7.0",
"react-addons-test-utils": "^15.6.2",
"react-bootstrap": "^1.0.0-beta.5",
"react-bootstrap-typeahead": "^3.2.4",
"react-datetime": "^2.16.3",
"react-debounce-input": "^3.2.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"react-select": "^2.3.0",
"reactstrap": "^7.0.2",
"rxjs": "^6.3.3",
"scss": "^0.2.4",
"test": "^0.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.4.0",
"babel-core": "^6.26.3",
"babel-jest": "^24.5.0"
}
}
package-lock.json is 20000 rows of code, so I dont know, what part of it is needed for explanation of my problem, all guides that I've read about this problem were useless for me, so I am asking here. package-lock.json是20000行代码,所以我不知道,解释我的问题需要它的哪一部分,我读过的关于这个问题的所有指南对我来说都没用,所以我在这里问。
The issue is that the app was bootstrapped with create-react-app
, but then the latest version of Jest
was also installed and the npm test
script within package.json
was changed to launch jest
directly. 问题是该应用程序是使用
create-react-app
引导的,但随后还安装了最新版本的Jest
,并将package.json
的npm test
脚本更改为直接启动jest
。
The test failed since Jest
was not configured to transpile the JSX syntax. 由于
Jest
未配置为转换JSX语法,因此测试失败。
Tests that use syntax like JSX have to be transpiled before they can be run by Jest
. 使用像JSX这样的语法的测试必须在
Jest
运行之前进行转换。
create-react-app
includes react-scripts
which handles all of that configuration automatically. create-react-app
包含react-scripts
,可自动处理所有配置。
If an app is bootstrapped with create-react-app
then Jest
does not need to be installed and configured manually. 如果使用
create-react-app
引导create-react-app
则无需手动安装和配置Jest
。
If an app is not bootstrapped with create-react-app
, or if the app is ejected from create-react-app
, then Jest
needs to be installed and configured to transpile the test code. 如果应用程序没有使用
create-react-app
自举,或者应用程序从create-react-app
弹出,则需要安装和配置Jest
以转换测试代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.