反应组件上的开玩笑错误意外标记
Jest Error Unexpected token on react component
我在 React Component Name
运行 npm test
上收到意外令牌。尝试阅读其他几个类似的问题,但 none 似乎对我有用。我在下面添加了 babelrc 的内容,package.json 和我的测试文件内容
<!-- content of .babelrc file -->
{ "presets": ["env"] }
<!-- content of package.son file -->
"dependencies": {
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^23.0.0-alpha.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest": "^22.4.2",
"react-test-renderer": "^16.2.0"
},
"jest": {
"notify": true,
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./src/setupTests.js",
"transform": {
"^.+\.jsx?$": "babel-jest"
}
}
<!-- Content of Test file App.test.js -->
import React from 'react';
import { shallow, mount } from 'enzyme';
import App from '../../src/components/App';
// describe what we are testing
describe('Render App Component', () => {
// make our assertion and what we expect to happen
it('should render without throwing an error', () => {
wrapper = shallow(<App />);
expect(wrapper.find('.app__wrapper').length).toEqual(1);
})
})
这是我解决问题的方法。
• 将以下内容添加到您的 .babelrc 文件中,并确保 .babelrc 位于根文件夹中
{ "presets": ["env","react"] }
• 确保排除静态资产,如 CSS、图像、SCSS、PDF、字体等。将以下内容添加到 package.json,如屏幕截图中突出显示的那样
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
截图:
如果有人来这里弄清楚发生了什么,我认为接受的答案与这里的问题无关。
当文件扩展名为 .js
并且您尝试在该文件中编写 JSX 时,如果您的 ESlint 配置正确,linter 会报错。
相反,尝试将文件扩展名更改为 .jsx
或 .tsx
(如果涉及 Typescript)。
我在 React Component Name
运行 npm test
上收到意外令牌。尝试阅读其他几个类似的问题,但 none 似乎对我有用。我在下面添加了 babelrc 的内容,package.json 和我的测试文件内容
<!-- content of .babelrc file -->
{ "presets": ["env"] }
<!-- content of package.son file -->
"dependencies": {
"react": "^16.2.0",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.2.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"redux": "^3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-jest": "^23.0.0-alpha.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.3",
"jest": "^22.4.2",
"react-test-renderer": "^16.2.0"
},
"jest": {
"notify": true,
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupTestFrameworkScriptFile": "./src/setupTests.js",
"transform": {
"^.+\.jsx?$": "babel-jest"
}
}
<!-- Content of Test file App.test.js -->
import React from 'react';
import { shallow, mount } from 'enzyme';
import App from '../../src/components/App';
// describe what we are testing
describe('Render App Component', () => {
// make our assertion and what we expect to happen
it('should render without throwing an error', () => {
wrapper = shallow(<App />);
expect(wrapper.find('.app__wrapper').length).toEqual(1);
})
})
这是我解决问题的方法。
- • 将以下内容添加到您的 .babelrc 文件中,并确保 .babelrc 位于根文件夹中
{ "presets": ["env","react"] }
- • 确保排除静态资产,如 CSS、图像、SCSS、PDF、字体等。将以下内容添加到 package.json,如屏幕截图中突出显示的那样
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
截图:
如果有人来这里弄清楚发生了什么,我认为接受的答案与这里的问题无关。
当文件扩展名为 .js
并且您尝试在该文件中编写 JSX 时,如果您的 ESlint 配置正确,linter 会报错。
相反,尝试将文件扩展名更改为 .jsx
或 .tsx
(如果涉及 Typescript)。