Jest Error Неожиданный токен на компоненте реакции

введите здесь описание изображения

Я получаю Неожиданный токен на React Component Name при запуске npm test. Пробовал читать несколько других подобных вопросов, но ни один из них, похоже, не работает для меня. Я добавил содержимое 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);
 })
})


reactjs jestjs babel-jest
person Sherry    schedule 21.03.2018    source источник
comment
находится ли .babelrc в вашем корневом каталоге?   -  person sme    schedule 21.03.2018
comment
Да, я подтверждаю, что .babelrc находится в корне рядом с package.json :)   -  person Sherry    schedule 21.03.2018
comment
Хм, хорошо.. Я смутно припоминаю, что у меня была такая же проблема, я изо всех сил пытаюсь вспомнить, что я сделал, чтобы решить ее.   -  person sme    schedule 21.03.2018
comment
Если это поможет, если я изменю содержимое файла .babelrc на { "presets": ["env","react"] }, ошибка изменится на i.imgur.com/ y0qKrN6.png, чтобы тесты начали читать мой файл css?   -  person Sherry    schedule 21.03.2018

Ответы (2)


arrow_upward
4
arrow_downward

Вот как я решил проблему.

    • Add the following content to your .babelrc file and make sure .babelrc is in the root folder
{ "presets": ["env","react"] }
    • Make sure you exclude static assets like CSS, images, SCSS, PDF, fonts, etc. Add the following to package.json as highlighted in the screenshot
"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"
}

Скриншот:

exclude-static-assets

person Sherry    schedule 21.03.2018

arrow_upward
0
arrow_downward

Если кто-нибудь придет сюда, чтобы выяснить, что происходит, я думаю, что принятый ответ не имеет отношения к проблеме здесь.

Когда расширение файла .js и вы пытаетесь записать JSX в этот файл, линтер будет жаловаться, если у вас правильная конфигурация ESlint.

Вместо этого попробуйте изменить расширение файла на .jsx или .tsx (если используется Typescript).

person Ege    schedule 02.06.2020