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

Question

当运行使用 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 class 声明的开头。它显然对 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
}

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 Documentation - Static Assets

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

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

Babel jest isn't working with loaded css module

typescript

jestjs

babeljs

babel-jest