开玩笑不转换CSS文件导入语句

Question

一些背景：

我正在开发一个Rails应用程序，我已经通过WebPacker宝石建立了React和Jest。我对这堆东西都是新手，所以请容忍我。当我在这样的组件中导入一些CSS时，我的问题就出现在Jest中

//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   

我试过的是：

我研究了与webpack合作的小丑博士和一些这一个等列出的技术，建议在package.json中使用Jest中的moduleNameMapper选项，就像Jest，transform选项一样。

我遇到的主要问题是，唯一能够工作的模块映射是这样的：

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

问题是：

由于它是.*，我认为它正在进行转换，并转换我的所有模块，包括带有测试本身的模块。因此，当我使用yarn test运行测试时，我开始得到关于酶适配器的构造函数：TypeError: _enzymeAdapterReact2.default is not a constructor的错误。当我删除映射和css导入时，这不是一个错误。

Jest文档中的示例希望我使用\\.(css)$而不是.*，但这与任何内容都不匹配，我将返回第一个错误。

有关这方面的几个问题：

• 为什么regex语法对moduleNameMapper和transform如此不同？那些CSS文件的匹配程序看起来几乎是一样的。
• 这些匹配器是否在您的node_modules目录中找到CSS文件？

我的圈套

下面是如何按照Webpacker/React的建议保存JS文件的方法：

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-模块，但是Github页面提到我“很可能”不需要它，特别是因为Jest现在使用模块映射/转换所做的事情。
• 遵循webpack 2部Jest文档并添加babel (我是直接在我的package.json文件中而不是在我的.babelrc中这样做，因为我不相信我有一个
• 在transform选项中使用identity-obj-proxy (一次尝试使用包含它在jest文档上所述内容的模拟文件的内容，另一次在identity-obj-proxy github readme`上使用

复制步骤

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或在app/javascript/src/css.css中创建一些css
6. 中导入css

当前的解决办法

解决方法非常简单-导入您的CSS，但是您想要在您的app/javascript/packs/application.js和Jest不需要知道它的任何东西。当您的application.js文件中有几个CSS导入时，这可能会很尴尬。

Answer 1

这个jest配置适用于我：

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

(记得要创建stub.css)

Answer 2

在我的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 = {};