Переменные Jest и SCSS

Question

Я использую Jest в своем проекте и застрял на одном тесте, который содержит переменную SCSS.

$grey-light: #C7C7C7;

Я получаю эту ошибку Jest:

Jest encountered an unexpected token

и она указывает напредыдущая строка кода.

Не могли бы вы помочь мне с этим?

Спасибо

Answer 1

Я тоже столкнулся с этим, и это было решено с помощью пакета identity-obj-proxy:

https://github.com/keyz/identity-obj-proxy

Просто следуйте инструкциям в документации Jest:

https://jestjs.io/docs/en/webpack#mocking-css-modules

И должен запускать тесты без проблем, касающихся операторов импорта файлов .scss.Все, что вам нужно сделать, это включить конфигурацию jest в ваш файл package.json:

{
  "name": "...",
  "version": "0.0.0",
  "description": "...",
  "main": "index.js",
  "scripts": {
    "start": "webpack --config webpack.config.js",
    "test": "jest"
  },
  "jest": {
    "moduleNameMapper": {
      "\\.(css|scss|less)$": "identity-obj-proxy"
    }
  },
  "keywords": [],
  "author": "Homer Jay",
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {}
}

И импорт .scss будет работать так, как ожидается, и любая переменная или миксин не вызовут ошибку.

Answer 2

Sass помогает вам писать более организованный и обслуживаемый код, но это не vaild код CSS, поэтому браузеры не знают, как его читать.

scss файлы должны быть скомпилированы в css, и вынужно импортировать и использовать файлы CSS.Например, определяемый вами параметр имеет значение #C7C7C7.Компилятор заменит этот параметр на это значение, поэтому окончательный CSS будет содержать только жестко закодированные значения