开玩笑错误反应组件上的意外令牌答案

【问题标题】：Jest Error Unexpected token on react component开玩笑错误反应组件上的意外令牌
【发布时间】：2018-03-21 02:55:16
【问题描述】：

在运行npm test 时，我在React Component Name 上获得了意外的令牌。尝试阅读其他几个类似的问题，但似乎没有一个对我有用。我在下面添加了 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 位于 package.json 旁边的根目录中：)
嗯，好吧..我隐约记得有同样的问题，我正在努力记住我为解决它做了什么
如果我将 .babelrc 文件的内容更改为 { "presets": ["env","react"] } 错误更改为 i.imgur.com/y0qKrN6.png 是否有帮助，那么测试开始读取我的 css 文件？

标签： reactjs jestjs babel-jest

【解决方案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"
}

截图：

【讨论】：

【解决方案2】：

如果有人来这里弄清楚发生了什么，我认为接受的答案与这里的问题无关。

当文件扩展名是.js 并且如果您尝试在该文件中编写 JSX，如果您有正确的 ESlint 配置，linter 会抱怨。

请尝试将文件扩展名更改为 .jsx 或 .tsx（如果涉及 Typescript）。

【讨论】：