Как включить поддержку декораторов при запуске тестов с CRA 2.1?

Question

Я пытаюсь получить тесты приложения React, которое использует декораторы и Typescript для работы с приложением Create React v2.1.0

Мне известно, что декораторы официально не поддерживаются.

Я могу нормально запустить приложение благодаря React App Rewired и @babel/plugin-proposal-decorators.

Я застрял, чтобы включить поддержку декоратора при выполнении тестов.

Мой npm test Сценарий: "test": "react-app-rewired test --env=jsdom --runInBand"

Тесты не пройдены с:

Для плагина decorators требуется опция decoratorsBeforeExport, чье значение должно быть логическим. Если вы мигрируете из Вавилона / Вавилона 6 или хотите использовать старое предложение декораторов, вы должны использовать плагин decorators-legacy вместо декораторов

Я попытался добавить файл .babelrc со следующими параметрами:

{
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]]
}

но получить удар по:

Невозможно использовать декораторы и устаревший плагин декораторов

Answer 1

? Я сопровождающий Create React App.

Декораторы поддерживаются, если вы используете TypeScript и работаете с тестами, дополнительная настройка не требуется (CRA ^2.1.1, в 2.1.0 была ошибка).

Декораторы не поддерживаются только в JavaScript .

---

Сначала удалите react-app-rewired и переключите ваши сценарии обратно на react-scripts. Затем удалите файл .babelrc.

Наконец, преобразуйте любые файлы с помощью декораторов в файлы TypeScript (.tsx). Теперь все должно работать!

Кроме того, ваш тестовый скрипт должен читать только "test": "react-scripts test" или "test": "react-scripts test --runInBand". Передача --env=jsdom не требуется, как указано в руководстве по обновлению 2.0.

Answer 2

@ Onlyann сделать резервную копию вашего текущего package.json или проекта.

И попробуйте эту конфигурацию, она должна помочь вам, и вы можете добавить дополнительные пакеты впоследствии.

// package.json 
    "@babel/core": "^7.0.0-beta.42",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.42",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.42",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.42",
    "@babel/preset-env": "^7.0.0-beta.42",
    "@babel/preset-react": "^7.0.0-beta.42",
    "@babel/preset-stage-2": "^7.0.0-beta.42", 

// .babelrc 
   {
    "presets": [
        ["@babel/preset-env", { "modules": false }],
        "@babel/preset-react",
        "@babel/preset-stage-2"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-decorators",
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ],
    "env": {
        "development": {
            "plugins": ["react-hot-loader/babel"]
        }
    } }