开玩笑不转换 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   

我尝试过的：

我经历了the Jest docs for working with webpack 和几个 Github 问题，这些问题涉及this one 等列出的技术，这建议在我的package.json 的Jest 配置中使用moduleNameMapper 选项，就像Jest 文档一样，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 现在正在使用模块映射/转换进行操作
• 关注webpack 2 portion of the Jest docs 并添加 babel（我直接在我的package.json 文件中而不是我的.babelrc，因为我不相信我有一个
• 将transform 选项与identity-obj-proxy 一起使用（尝试了一次，其中包含模拟文件的内容，其中包含它在jest docs 上所说的内容，以及一个在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 或在 app/javascript/src/css.css 创建一些 css
6. 在
中导入css

当前的解决方法

解决方法很简单——在app/javascript/packs/application.js 中导入你想要的CSS，Jest 不需要知道任何关于它的信息。当您最终在 application.js 文件中导入多个 CSS 时，这可能会很尴尬。

Answer 1

这个笑话配置对我有用：

{
"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 = {};