Babel jest 不适用于加载的 css 模块答案

【问题标题】：Babel jest isn't working with loaded css moduleBabel jest 不适用于加载的 css 模块
【发布时间】：2017-10-18 18:59:35
【问题描述】：

使用 jest 运行简单组件测试时出现以下错误。

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()
})

Header.tsx

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

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

export default Header

Header.scss

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

header {
  background: white
}

【问题讨论】：

标签： typescript jestjs babeljs babel-jest

【解决方案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 Documentation - Static Assets

使用identity-obj-proxy作为mock，可以通过npm install --save-dev identity-obj-proxy安装。

【讨论】：