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所列出的技术经历了this one和几个 Github问题，建议在webpack 2 portion of the Jest docs的Jest配置中使用moduleNameMapper选项与Jest docs一样，package.json选项。

我遇到的主要问题是唯一可行的模块映射是这样的：

transform

问题：

因为它是"moduleNameMapper": { ".*": "<rootDir>/path/to/mock.js" }，我认为它正在进行并转换所有我的模块，包括带有测试本身的模块。所以当我用.*运行测试时，我开始得到关于酶适配器的构造函数的错误： yarn test。这不是我删除映射和css导入时出现的错误。

Jest文档中的示例要求我使用TypeError: _enzymeAdapterReact2.default is not a constructor而不是\\.(css)$，但这与任何内容都不匹配，我回来时遇到第一个错误。

关于这个的一些问题：

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

我的设置

以下是我如何按照Webpacker / React-rails的建议保存我的JS文件：

node_modules

的package.json

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

testSetup.js

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

my_test.jsx

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

我试过的更多东西

在我的组件中使用import MyComponent from 'MyComponent' describe('<MyComponent> />', () => { it('renders', () => { const wrapper == shallow((<MyComponent/>)); expect(wrapper.find('#some_id').toHaveLength(1); } }语法，但是CSS实际上并没有显示在页面上，它被称为import css from 'react-datetime/css/react-datetime.css'的东西所固定，但似乎没有把它放在任何地方得到解释。
使用jest-css-modules，但是Github页面提到我“很可能”不需要它，特别是因为Jest现在正在使用modulemapping / transformationing
关注{{3}}并添加babel（我直接在我的extract-text-plugin文件中执行，而不是package.json，因为我不相信我有一个
将.babelrc选项与transform一起使用（尝试使用模拟文件的内容包含其在jest docs上的内容，以及identity-obj-proxy github readme`上的内容/ LI>

重现的步骤

创建Rails 4.2应用
安装Webpacker gem和identity-obj-proxy
安装ReactRails bundle exec rake webpacker:install
制作组件bundle exec rake webpacker:install:react
安装React-datetime bundle exec rails g react:component HelloWorld或在yarn add react-datetime
导入

当前解决方法

解决方法非常简单 - 您可以在app/javascript/src/css.css中导入CSS，而Jest不需要了解它。当你最终在app/javascript/packs/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 = {};

Jest没有转换CSS文件导入语句