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类声明的开头。它显然与css完全不兼容？还是scss？我有所有适当的babel加载器用于css和sass并且它们在开发中工作正常，我认为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作为模拟，可以npm install --save-dev identity-obj-proxy安装。

Babel jest无法使用加载的css模块

1 个答案: