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

Question

一些背景：

我正在开发Rails应用程序，并且已经通过Webpacker gem设置了React-rails和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和几个 Github的问题，对于像中所列的技术这一块这表明使用moduleNameMapper的玩笑配置选项在我package.json喜欢的玩笑文档做的transform选择。

我遇到的主要问题是，唯一可用的模块映射如下所示：

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

问题在于：

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

Jest文档中的示例希望我使用，\\.(css)$而.*不是任何示例，但我返回了第一个错误。

有关此的几个问题：

• 为什么正则表达式的语法与moduleNameMapper和如此不同transform？CSS文件的匹配器看起来几乎一样
• 这些匹配器中的任何一个在您的node_modules目录中找到CSS文件吗？

我的设定

这是我按照Webpacker / React-rails的建议保存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-modules，但是Github页面上提到我“可能”不需要它，特别是因为Jest现在正在使用模块映射/转换来做
• 遵循Jest文档的webpack 2部分并添加babel（我直接在我的package.json文件而不是我的文件中执行此操作，.babelrc因为我不相信我有一个
• 将transform选项与identity-obj-proxy（一起使用，对模拟文件的内容进行了一次尝试，该文件包含在开玩笑的文档中所说的内容，而在identity-obj-proxy github自述文件中包含一个内容

重现步骤

1. 创建一个Rails 4.2应用
2. 安装Webpacker gem和 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或在其中创建一些CSSapp/javascript/src/css.css
6. 导入css

当前解决方法

解决方法非常简单-随心所欲地导入CSS，app/javascript/packs/application.js而Jest对此一无所知。当您在application.js文件中最终导入多个CSS时，可能会很尴尬。

Answer 1

这个笑话配置对我有用：

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

（记得创建stub.css）