【发布时间】：2021-10-15 00:29:33
【问题描述】：
我在尝试对 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")
});
})
还有我的 package.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 配置文件。
任何帮助将不胜感激！
【问题讨论】：
-
你能把App组件的代码也发一下吗？谢谢
-
嗨@axel，我已将其添加到帖子中。
标签： reactjs unit-testing jestjs create-react-app enzyme