SyntaxError с Jest и React и импортирование файлов CSS

Я пытаюсь передать свой первый тест Жестов с помощью React and Babel.

Я получаю следующую ошибку:

SyntaxError:/Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Неожиданный токен

    >  7 | @import '../variables.css';
          | ^

My package.json config для jest выглядит так:

"babel": {
    "presets": [
      "es2015",
      "react"
    ],
    "plugins": [
      "syntax-class-properties",
      "transform-class-properties"
    ]
  },
  "jest": {
    "moduleNameMapper": {
      "^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
      "^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
    },
    "testPathIgnorePatterns": [
      "/node_modules/"
    ],
    "collectCoverage": true,
    "verbose": true,
    "modulePathIgnorePatterns": [
      "rpmbuild"
    ],
    "unmockedModulePathPatterns": [
      "<rootDir>/node_modules/react/",
      "<rootDir>/node_modules/react-dom/",
      "<rootDir>/node_modules/react-addons-test-utils/",
      "<rootDir>/node_modules/fbjs",
      "<rootDir>/node_modules/core-js"
    ]
  },

Итак, что мне не хватает?

Ответы

Ответ 1

moduleNameMapper - это настройка, которая сообщает Jest, как интерпретировать файлы с другим расширением. Вы должны сказать ему, как обрабатывать файлы Меньше.

Создайте такой файл в своем проекте (вы можете использовать другое имя или путь, если хотите):

config/CSSStub.js

module.exports = {};

Эта заглушка - это модуль, который мы скажем Jest использовать вместо файлов CSS или Less. Затем измените настройку moduleNameMapper и добавьте эту строку в свой объект, чтобы использовать его:

'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'

Теперь Jest будет обрабатывать любой файл CSS или Less как модуль, экспортирующий пустой объект. Вы также можете сделать что-то еще - например, если вы используете модули CSS, вы можете использовать прокси, чтобы каждый импорт возвращал имя импортируемого свойства.

Подробнее читайте в этом руководстве: https://facebook.github.io/jest/docs/en/webpack.html

Ответ 2

Я решил это, используя ключ moduleNameMapper в конфигурациях jest в файле package.json

{
   "jest":{
        "moduleNameMapper":{
             "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
             "\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
        }
   }
}

После этого вам нужно будет создать два файла, как описано ниже

  • __mocks__/styleMock.js

    module.exports = {};

  • __mocks__/fileMock.js

    module.exports = 'test-file-stub';

Если вы используете модули CSS, тогда лучше смоделировать прокси, чтобы включить поиск className. следовательно, ваши конфигурации изменятся на:

{
  "jest":{
     "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|scss|sass)$": "identity-obj-proxy"
    },
  }
}

Но вам нужно будет установить пакет identity-obj-proxy в зависимости от разработчика, т.е.

yarn add identity-obj-proxy -D

Для дополнительной информации. Вы можете обратиться к шутку документов

Ответ 3

Добавление следующего в package.json решило эту проблему для меня:

"jest": {
    "moduleNameMapper": {
        ".+\\.(css|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
    }
}

И, конечно, вам нужно запустить yarn add -D jest-transform-stub