Babel Jest无法与已加载的CSS模块一起使用

Question

使用笑话运行简单的组件测试时，出现以下错误。

FAIL  src/components/header/Header.test.tsx
  ? Test suite failed to run

    /Volumes/WorkSpace/Projects/wc2/src/components/header/Header.scss:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import "../../styles/variables";
                                                                                             ^
    SyntaxError: Invalid or unexpected token

      at ScriptTransformer._transformAndBuildScript (../../../../Users/micahblu/.nvm/versions/node/v7.2.0/lib/node_modules/jest/node_modules/je
st-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/components/header/Header.tsx:2:1)

该组件导入header.scss。原始错误抱怨我在文件开头有@import语句，但甚至删除它也抱怨“。”。在CSS类声明的开头。显然对CSS根本不起作用？还是scss？我拥有适用于css和sass的所有适当的babel加载程序，并且它们在开发中运行良好，我认为babel-jest应该了解如何处理文件。

在我的package.json中，我有：

"jest": {
    "transform": {
      "^.+\\.(tsx|ts)?$": "typescript-babel-jest"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
  }

Header.test.tsx

import React from 'react'
import renderer from 'react-test-renderer'
import Header from './Header'

test('output', () => {
  const component = renderer.create(<Header />)
  expect(component).toMatchSnapshot()
})

头文件

import React from 'react'
import { Link } from 'react-redux-router'
import "./Header.scss"

const Header = () => (
    <header>
        <h1>My header</h1>
    </header>
)

export default Header

头文件

@import "../../styles/variables";

header {
  background: white
}

Answer 1

您可以使用该moduleNameMapper属性将所有静态资产替换为模拟。

"jest": {
    "transform": {
      "^.+\\.(tsx|ts)?$": "typescript-babel-jest"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleNameMapper": {
        "^.+\\.scss$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ]
}

这是文档：Jest文档-静态资产

将identity-obj-proxy用作模拟，可以通过安装npm install --save-dev identity-obj-proxy。