我正在执行一个依赖于 "antd" 节点模块的 jest 测试。似乎无法正确解析 atnd 模块内的 css 文件。我该怎么解决？
当我运行它时，会出现以下错误：
当我运行它时，会出现以下错误：
C:\path\to\project\node_modules\antd\lib\style\index.css:10
html {
^
SyntaxError: Unexpected token {
at transformAndBuildScript (node_modules\jest-cli\node_modules\jest-runtime\build\transform.js:316:10)
at Object.<anonymous> (node_modules\antd\lib\switch\style\css.js:3:1)
我的babelrc如下：
{
"presets": [
"react",
"es2015-loose",
"stage-0"
],
"plugins": [
"babel-root-slash-import",
"transform-decorators-legacy",
"react-hot-loader/babel",
"transform-runtime",
["import", [{"libraryName": "antd", "style" : true}]]
],
"compact": true,
"ignore": [
"/node_modules/(?!react-number-input)"
]
}
jest.json
{
"setupTestFrameworkScriptFile": "<rootDir>/jasmine-setup-env.js",
"bail": false,
"collectCoverage": true,
"collectCoverageFrom": [
"**/src/**/*.js",
"!**/node_modules/**"
],
"coverageDirectory": "coverage",
"coveragePathIgnorePatterns": [
"<rootDir>/node_modules"
],
"coverageThreshold": {
"global": {
"branches": 20,
"functions": 15,
"lines": 20,
"statements": 20
}
},
"globals": {
"SOURCEMAP": true
},
"modulePaths": [
"<rootDir>/src",
"<rootDir>/sass",
"<rootDir>/public",
"<rootDir>/node_modules",
"<rootDir>/config"
],
"resetModules": true,
"testPathDirs": [
"<rootDir>/test/util"
],
"testRegex": "(/test/.*|\\.(test|spec))\\.(js|jsx)$",
"verbose": false,
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/"
]
}
js文件jasmine-setup-env仅添加了jasmine报告器并启用了jest-enzyme。
我的webpack配置包含以下内容：
const webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'./src/main'
],
output: {
path: './public',
filename: 'bundle.js'
},
module: {
// in loaders you set the plugins to use when loading specific fle extensions
loaders: [
{
// any js files should be loaded by babel
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-decorators-legacy"]
},
include: path.join(__dirname, 'src')
},
{
// json files use the json loader
test: /\.json$/, loader: 'json'
},
{
// any static files are loaded directly as a file
test: /\.(ico|gif|png|jpg|jpeg|svg|woff|ttf|eot|webp)$/,
loaders: ["file?context=public&name=/[path][name].[ext]"],
exclude: /node_modules/
},
{
// css fles are loaded using the css loader
test: /\.css$/,
loader: 'style!css!'
}
]
},
// in here we specify the configuration for when we require or import specific modules
resolve: {
// we accept any file that is either as-is, using a .js or .json extension
extensions: ['', '.js', '.json'],
// these directories are the roots in which we scan for files given
modulesDirectories: [
"src",
"sass",
"public",
"node_modules",
"config"
],
// these shims are needed for bunyan
alias: {
'dtrace-provider': path.resolve('empty-shim.js'),
'safe-json-stringify': path.resolve('empty-shim.js'),
"mv": path.resolve('empty-shim.js'),
'source-map-support': path.resolve('empty-shim.js')
}
},
plugins: [
// in the provide plugin we specify which classes will be automatically replaced with requires by webpack
// eg: Any reference to React will be replaced with require('react') without any imports required
new webpack.ProvidePlugin({
'React': 'react',
'$': 'jquery',
'jQuery' : 'jquery'
})
],
node: {
fs: 'empty' // we are mocking node's fs module to be empty
}
};