作者:2674224139_8a6503 | 来源:互联网 | 2023-02-03 15:33
使用笑话运行简单的组件测试时,出现以下错误。
FAIL src/components/header/Header.test.tsx
? Test suite failed to run
/Volumes/WorkSpace/Projects/wc2/src/components/header/Header.scss:1
({"Object.":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. (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()
expect(component).toMatchSnapshot()
})
头文件
import React from 'react'
import { Link } from 'react-redux-router'
import "./Header.scss"
const Header = () => (
My header
)
export default Header
头文件
@import "../../styles/variables";
header {
background: white
}
Ben Fogel..
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用作模拟,可以通过安装npm install --save-dev identity-obj-proxy
。
1> Ben Fogel..:
您可以使用该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
。