[英]React app: Jest encountered an unexpected token
我嘗試測試通過create-react-app
。 自動生成的測試文件只有一個:
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);
});
這是我的package.json
(我也有 package-lock.json(~ 15k 行)):
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
當我嘗試使用測試腳本對其進行測試時,出現此錯誤:
Jest 遇到了意外的令牌
This usually means that you are trying to import a file which Jest cannot parse, eg it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
細節:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export
{ 默認為 a11yDark } 來自 './a11y-dark';
另外,我沒有.babelrc
文件。 我試圖添加.babelrc
但它沒有幫助(或者我做錯了)
如果您在嘗試為組件導入 javascript styles 時遇到此錯誤,請確保您的目標是
react-syntax-highlighter/dist/cjs/...
而不是
react-syntax-highlighter/dist/esm/...
Jest 應該能夠解析它。
所以,最后我解決了這個問題。 我的最終配置是:
babel.config.js :
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react'],
};
package.json :
{
"name": "project",
"version": "1.0",
"private": true,
"dependencies": {
"avro-js": "^1.9.1",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"jquery": "^3.4.1",
"prop-types": "^15.7.2",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-redux": "^7.1.1",
"react-scripts": "3.2.0",
"react-syntax-highlighter": "^11.0.2",
"reactstrap": "^8.0.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"jest": {
"transformIgnorePatterns": [
"/node_modules/(?!(react-syntax-highlighter)/)"
]
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"eslint": "^6.7.1",
"jest": "^24.9.0",
"jest-cli": "^24.9.0",
"react-test-renderer": "^16.12.0",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
我不確定這是最好的解決方案,但至少它有效
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.