Jest не преобразует операторы импорта файлов CSS

Question

Некоторый контекст:

Я работаю над приложением Rails и настроил React-rails и Jest через гем Webpacker.Я новичок в большей части этого стека, поэтому, пожалуйста, потерпите меня.Моя проблема возникает в Jest, когда я импортирую немного CSS в такой компонент, как

//some_component.jsx
import('react-datetime/css/react-datetime.css')
//or even any local CSS
import('./any_local_css.css')

yarn test

import('react-datetime/css/react-datetime.css');
^^^^^^

SyntaxError: Unexpected token import   

Что я пробовал:

Я прошел документы Jest для работы с веб-пакетом и несколько проблем Github для перечисленных технологий, таких как эта , которая предлагает использовать опцию moduleNameMapper в конфигурации Jest в моем package.json, как это делают документы Jest, transform option.

Основная проблема, с которой я сталкиваюсь, заключается в том, что единственная карта модулей, которая будет работать, выглядит следующим образом:

"moduleNameMapper": { ".*": "<rootDir>/path/to/mock.js" }

Проблема счто:

, так как это .*, я думаю, что оно идет вперед и преобразует все мои модули, включая тот, который был в самом тесте.Поэтому, когда я запускаю тест с yarn test, я начинаю получать ошибки о конструкторе ферментного адаптера: TypeError: _enzymeAdapterReact2.default is not a constructor.Это не ошибка, которую я получаю, когда удаляю сопоставление и импорт css.

В примере в документации Jest я хочу использовать \\.(css)$ вместо .*, но это ничего не будет совпадать, иЯ вернулся с первой ошибкой.

Несколько вопросов по этому поводу:

• Почему синтаксис регулярных выражений так отличается для moduleNameMapper и transform?Эти сопоставители для CSS-файла выглядят почти одинаково
• . Находят ли какие-либо из этих сопоставителей файлы CSS в вашем каталоге node_modules?

Моя настройка

ЗдесьВот как я сохраняю свои JS-файлы в соответствии с рекомендациями Webpacker / React-rails:

app
├── javascript
|   ├── components
|   |   └── my_component.jsx
|   └── src
|       └── my_css.css
├── test
|   └── suites
|       └── javascript
|           ├── src 
|           |   └── testSetup.jsx
|           └── my_test.jsx
├── node_modules
└── package.json

package.json

  "jest": { 
    "moduleNameMapper": { 
      "\\.(css)$": ""
    },
    "setupTestFrameworkScriptFile": "<rootDir>/test/suites/javascript/src/testSetup.jsx",
    "moduleDirectories": [ 
      "node_modules",
      "app/javascript/components",
      "app/javascript/src"
    ],
    "roots": [ 
      "test/suites/javascript"
    ] 
  } 

testSetup.js

import ReactDOM from 'react-dom';
import { mount, shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });

my_test.jsx

import MyComponent from 'MyComponent'

describe('<MyComponent> />', () => {
  it('renders', () => {
    const wrapper == shallow((<MyComponent/>));
    expect(wrapper.find('#some_id').toHaveLength(1);
  }
}

Другие вещи, которые я пробовал

• Использование синтаксиса import css from 'react-datetime/css/react-datetime.css' внутри моего компонента, но тогда CSS фактически не отображается на странице, он отсекается чем-то, что называется extract-text-plugin, но, похоже, не помещает его где-либо, что интерпретируется.
• Используя jest-css-modules, но на странице Github упоминается, что я "скорее всего" выигралв этом нет необходимости, особенно из-за того, что сейчас делает Jest с модулем / преобразованием модулей
• Следуйте части webpack 2 документации Jest и добавьте babel (я делаю это прямо в моем *Файл 1073 * вместо моего .babelrc, поскольку я не верю, что у меня есть один
• с использованием transform опция с identity-obj-proxy (пробовал один раз с содержимым фиктивного файла, содержащего то, о чем он говорит в документах jest, и один в файле readme identity-obj-proxy github`

Шаги кВоспроизвести

1. Создать приложение Rails 4.2
2. Установить гем Webpacker и bundle exec rake webpacker:install
3. Установить ReactRails bundle exec rake webpacker:install:react
4. Сделать компонент bundle exec rails g react:component HelloWorld
5. Установите React-datetime yarn add react-datetime ИЛИ создайте несколько CSS в app/javascript/src/css.css
6. Импортируйте CSS в

Текущий обходной путь

Обходной путь довольно прост - импортируйте ваш CSS так, как вы хотите в своем app/javascript/packs/application.js, и Jest ничего не должен знать об этом.Это может быть неловко, когда вы получите несколько CSS-импортирований в файл application.js.

Answer 1

В моем package.json я делаю:

"jest": {
"verbose": true,
"testURL": "https://test.domain.com",
"testPathIgnorePatterns": ["config/*"],
"moduleNameMapper": {
  "\\.(css|scss)$": "<rootDir>/app/javascript/lib/CSSStub.js"
  }
},

Где app / javascript / lib / CSSStub.js просто

module.exports = {};

Answer 2

Этот конфиг шутка работал для меня:

{
"jest": {
    "moduleNameMapper": {
      ".*css$": "<rootDir>/src/stub.css",
    }
}

(не забудьте создать stub.css)