1

使用 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"
    ]
  }

头文件.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()
})

头文件.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

头文件.scss

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

header {
  background: white
}
4

1 回答 1

5

您可以使用该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 作为 mock，可以通过npm install --save-dev identity-obj-proxy.

于 2017-05-18T20:08:47.767 回答