我在尝试在CRA应用程序内的组件上运行测试时遇到了一个问题。我是Jest/Enzyme的新手，并且在我专门为学习单元测试而创建的一个CRA应用程序中运行了非常类似的测试，但是当我试图将其集成到现有项目中时，我得到了这个错误:
SyntaxError: /Users/dave/Teacher_App/client_teacher/App.test.js: Unexpected token (12:20)
10 |
11 | beforeEach(() => {
> 12 | wrapper = mount(<App />)
| ^
13 | console.log(wrapper.debug())
14 | })
15 |
我已经尝试了终端中提供的建议，并在这里阅读了一堆关于相同问题的其他帖子的答案，但似乎没有任何工作!
下面是我的。/setupTests.js的内容
import '@testing-library/jest-dom';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
。/App.test.js
import App from './App';
import React from 'react';
import { mount } from 'enzyme';
describe('counter testing', () => {
let wrapper ;
beforeEach(() => {
wrapper = mount(<App />)
console.log(wrapper.debug())
})
test('renders the title of the dash', () => {
expect(wrapper.find('h1').text()).toContain("Dashboard")
});
})
和我的包。Json(这是一个相当大的应用程序!)
{
"name": "app-schools",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-brands-svg-icons": "^5.14.0",
"@fortawesome/free-regular-svg-icons": "^5.14.0",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@fullcalendar/daygrid": "^5.3.2",
"@fullcalendar/react": "^5.3.1",
"@rails/actioncable": "^6.0.3-4",
"@react-pdf/renderer": "^1.6.14",
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.9.0",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@use-hooks/image-size": "^1.0.5",
"axios": "^0.19.2",
"babel-jest": "^27.2.5",
"crossfilter2": "^1.4.7",
"d3": "^5.16.0",
"date-fns": "^2.23.0",
"dc": "^3.2.1",
"dompurify": "^2.3.3",
"downloadjs": "^1.4.7",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"glamor": "^2.20.40",
"google-classroom-share": "^0.5.4",
"googleapis": "^39.2.0",
"jest": "^27.2.5",
"jwt-decode": "^3.1.2",
"loadash": "^1.0.0",
"node-sass": "^4.14.1",
"query-string": "^7.0.0",
"react": "^16.13.1",
"react-country-region-selector": "^3.0.2",
"react-countup": "^4.3.3",
"react-datepicker": "^3.0.0",
"react-dom": "^16.13.1",
"react-draggable": "^4.4.3",
"react-elastic-carousel": "^0.7.4",
"react-flexbox-grid": "^2.1.2",
"react-flip-page": "^1.6.4",
"react-ga": "^3.3.0",
"react-google-picker": "^0.1.0",
"react-helmet": "^6.1.0",
"react-load-script": "0.0.6",
"react-masonry-css": "^1.0.14",
"react-modern-calendar-datepicker": "^3.1.6",
"react-player": "^2.7.0",
"react-quill": "^1.3.5",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-script-tag": "^1.1.2",
"react-scripts": "3.4.1",
"react-select": "^3.1.0",
"react-share": "^4.2.1",
"react-swipeable": "^5.5.1",
"react-test-renderer": "^17.0.2",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^5.1.1",
"typography": "^0.16.19",
"typography-theme-funston": "^0.16.19"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"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"
]
}
}
这是App.jsx组件的内容，在尝试调试时剥离:
import React from 'react';
const App = () => {
return (
<div>
<h1>Dashboard</h1>
</div>
)
}
export default App;
我想我在某个地方错过了一些设置。这是一个非弹出的CRA应用程序，所以我不能修改babel配置文件。
任何帮助都将非常感激!
你的文件扩展名似乎是不正确的，这就是为什么它有问题承认有jsx在你的文件。修改"App.test.js"的扩展名为"App.test.jsx"。
我还建议放弃酶的React测试库，因为你正在使用DOM测试库。Enzyme正在进入这样一种状态:新版本的React将需要第三方适配器，当你最终想要升级到版本16以上时，这将是很尴尬的。