Как добавить приложение Jest в React, созданное на Parcel.js

У меня есть приложение React, созданное с использованием parcel.js. Я добавил Jest и пытаюсь запустить базовый тест, но похоже, что код не преобразуется перед запуском теста Jest encountered an unexpected token.

Я не уверен, что часть Parcel.js - отвлекающий маневр, но это немного отличается от приведенных здесь примеров.

package.json

{
"name": "cool-tool",
"version": "1.0.0",
"description": "cool tool",
"main": "public/main.js",
"directories": {
"test": "tests"
},
"dependencies": {
 "react": "^16.4.1",
 "react-dom": "^16.4.1"
},
"devDependencies": {
 "babel-cli": "^6.26.0",
 "babel-jest": "^23.4.2",
 "babel-preset-env": "^1.7.0",
 "babel-preset-react": "^6.24.1",
 "jest": "^23.4.2",
 "parcel-bundler": "^1.9.7",
 "react-test-renderer": "^16.4.2"
},
"scripts": {
 "test": "jest --debug",
 "start": "parcel watch assets/js/troubleshooting.js --out-dir public/js",
 "build": "parcel build assets/js/troubleshooting.js --out-dir public/js"
},
"jest": {
 "testEnvironment": "node"
},
"repository": {
"type": "git",
"url": "shhhh.git"
},
"author": "me",
"license": "ISC"
}

babel.rc

{
  "presets": ["env", "react"]
}

Jest run с опцией --debug

    {
  "configs": [
      {
        "automock": false,
        "browser": false,
        "cache": true,
        "cacheDirectory": "/var/folders/v4/0kv69mcn5530g0gshbwwqfgr0000gn/T/jest_dx",
        "clearMocks": false,
        "coveragePathIgnorePatterns": [
        "/node_modules/"
        ],
        "detectLeaks": false,
        "detectOpenHandles": false,
        "errorOnDeprecated": false,
        "filter": null,
        "forceCoverageMatch": [],
        "globals": {},
        "haste": {
        "providesModuleNodeModules": []
        },
        "moduleDirectories": [
        "node_modules"
        ],
        "moduleFileExtensions": [
        "js",
        "json",
        "jsx",
        "node"
        ],
        "moduleNameMapper": {},
        "modulePathIgnorePatterns": [],
        "name": "6f41d9651941a1101334b070800aeec1",
        "prettierPath": null,
        "resetMocks": false,
        "resetModules": false,
        "resolver": null,
        "restoreMocks": false,
        "rootDir": "/Users/me/Projects/coolproject",
        "roots": [
        "/Users/me/Projects/coolproject"
        ],
        "runner": "jest-runner",
        "setupFiles": [
        "/Users/me/Projects/coolproject/node_modules/regenerator-runtime/runtime.js"
        ],
        "setupTestFrameworkScriptFile": null,
        "skipFilter": false,
        "snapshotSerializers": [],
        "testEnvironment": "/Users/me/Projects/coolproject/node_modules/jest-environment-node/build/index.js",
        "testEnvironmentOptions": {},
        "testLocationInResults": false,
        "testMatch": [
        "**/__tests__/**/*.js?(x)",
        "**/?(*.)+(spec|test).js?(x)"
        ],
        "testPathIgnorePatterns": [
        "/node_modules/"
        ],
        "testRegex": "",
        "testRunner": "/Users/me/Projects/coolproject/node_modules/jest-jasmine2/build/index.js",
        "testURL": "about:blank",
        "timers": "real",
        "transform": [
        [
          "^.+\\.jsx?$",
          "/Users/me/Projects/coolproject/node_modules/babel-jest/build/index.js"
        ]
        ],
        "transformIgnorePatterns": [
        "/node_modules/"
        ],
        "watchPathIgnorePatterns": []
      }
    ],
    "globalConfig": {
    "bail": false,
    "changedFilesWithAncestor": false,
    "collectCoverage": false,
    "collectCoverageFrom": null,
    "coverageDirectory": "/Users/me/Projects/coolproject/coverage",
    "coverageReporters": [
      "json",
      "text",
      "lcov",
      "clover"
    ],
    "coverageThreshold": null,
    "detectLeaks": false,
    "detectOpenHandles": false,
    "errorOnDeprecated": false,
    "expand": false,
    "filter": null,
    "globalSetup": null,
    "globalTeardown": null,
    "listTests": false,
    "maxWorkers": 7,
    "noStackTrace": false,
    "nonFlagArgs": [],
    "notify": false,
    "notifyMode": "always",
    "passWithNoTests": false,
    "projects": null,
    "rootDir": "/Users/me/Projects/coolproject",
    "runTestsByPath": false,
    "skipFilter": false,
    "testFailureExitCode": 1,
    "testPathPattern": "",
    "testResultsProcessor": null,
    "updateSnapshot": "new",
    "useStderr": false,
    "verbose": null,
    "watch": false,
    "watchman": true
  },
  "version": "23.4.2"
}

У меня такая же проблема. Я нашел установку, которая работает без этой ошибки. medium.com/@dtkatz/… Но ... в коде не используются последние пакеты, и как только я их обновляю, он перестает работать и имеет ту же ошибку.

Jason Allshorn 09.08.2018 22:43

@JasonAllshorn Я не уверен, какие были текущие версии пакетов на момент вашего комментария, но в настоящее время в документации указано, что важно использовать Babel 7 с Jest 24+. Я также сталкиваюсь с теми же проблемами после статьи Дэвида Каца, но точность версий помогла мне решить эту проблему.

Alex Baklanov 21.02.2019 15:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
1 160
1

Ответы 1

Надеюсь, этот ответ поможет другим тупицам. Я назвал файл конфигурации babel babel.rc, а не .babelrc. Второй правильный.

Другие вопросы по теме