Jest терпит неудачу, когда CSS использует @import - PullRequest
Новая
       31

Jest терпит неудачу, когда CSS использует @import

0 голосов
/ 04 марта 2019

пытается настроить jest для работы с css-декораторами.

Файл css, связанный с моим компонентом реакции, имеет: 

@import './another.css'

Теперь, когда я запускаю jest, я получаю:

SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: поддержка экспериментального синтаксиса decorators-legacy в настоящее время не включена (2: 1):

Затем я пошел к своему .babelrc и добавил: 

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

Снова выполняя шутку, я получаю

[BABEL] / Пользователи / thiagofacchini /Documents / atomix / src / library / protons / Animator / tests / index.test.js: для плагина decorators требуется параметр decoratorsBeforeExport, значение которого должно быть логическим.Если вы хотите использовать семантику устаревших декораторов, вы можете установить опцию «legacy: true».

(При обработке: / Users / thiagofacchini / Documents / atomix / node_modules / @ babel / plugin-offer-decorators/lib/index.js")

Также попытался изменить мой .babelrc на: 

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

Но получаю точно такую ​​же ошибку.

Мой пакет.json выглядит так: 

"@babel/core": "^7.3.4",
"@babel/plugin-proposal-decorators": "^7.3.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@logux/eslint-config": "^27.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",

ПРИМЕЧАНИЕ: ошибка только что произошла на JEST, моя сборка разработки работает нормально.

Я погуглил, но просто не могупонять, что происходит. Может быть, что-то с версиями? Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 04 марта 2019

Когда вы запускаете свое приложение в процессе разработки, процесс сборки обрабатывается с помощью веб-пакета / пакета / любого другого инструмента, который вы используете.

Эти инструменты позволяют вам (с помощью плагинов) делать что-тонапример, импортировать css в javascript, а затем в нужный момент выложить его обратно как css.Это не встроенная функция javascript.

Jest работает на узле js, который не обладает всеми функциями веб-пакета и не может анализировать raw css и т. Д.

Поэтому, когда у вас возникла ошибка"SyntaxError: /Users/thiagofacchini/Documents/atomix/src/library/atoms/Label/styles.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (2:1):"

на самом деле это nodejs, пытающийся проанализировать CSS как javascript!Вы можете прочитать больше о том, что это было, хотя вы делали здесь https://www.sitepoint.com/javascript-decorators-what-they-are/

Так как вы управляете CSS в своей среде Jest?

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

сначала npm установите identity-obj-proxy

, а затем добавьте следующее в свой jest.config.js 

moduleNameMapper: {
    "\\.css$": "identity-obj-proxy",
    "^lodash-es$": "lodash"
},
...