我有一个奇怪的错误imo,我真的不明白为什么我现在看到这个,因为我一直在使用这些测试没有任何问题,我离开它一个月左右并试图再次运行并看到以下内容:
错误
npm test
> wekindred.com@0.0.1 test /var/www
> BABEL_ENV=test nyc --require babel-register mocha --watch 'test/**/*.spec.js'
SyntaxError: /var/www/src/components/shared/logo/_Logo.css: Unexpected token (1:0)
> 1 | .logo {
| ^
2 | font-size: 5rem;
3 | }
的package.json
{
"main": "./src/index.js",
"scripts": { "test": "BABEL_ENV=test nyc --require babel-register mocha --watch tap 'test/**/*.spec.js'",
},
"dependencies": {
.....
"enzyme": "^2.8.0",
"react": "^15.5.0",
"react-addons-test-utils": "^15.5.0",
"react-css-modules": "^4.1.0",
"react-dom": "^15.5.0",
"react-redux": "^5.0.3",
"react-router": "^4.1.1",
"react-router-dom": "^4.0.0",
"react-router-redux": "^5.0.0-alpha.6",
"react-tap-event-plugin": "^2.0.1",
"react-test-renderer": "^15.5.4",
"webpack": "^2.2.1"
.....
},
"devDependencies": {
.....
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.2.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babel-runtime": "^6.23.0",
"chai": "^3.5.0",
"css-loader": "^0.27.3",
"css-modules-require-hook": "^4.0.6",
"mocha": "^3.2.0",
"node-sass": "^4.5.2",
"nyc": "^10.2.0",
"path": "^0.12.7",
"postcss-fontpath": "^0.3.0",
"postcss-load-config": "^1.2.0",
"postcss-loader": "^1.3.3",
"postcss-nested": "^1.0.0",
"postcss-simple-vars": "^3.0.0",
"postcss-strip-inline-comments": "^0.1.5",
"precss": "^1.4.0",
"style-loader": "^0.16.0",
"svg-react-loader": "^0.3.7",
"url-loader": "^0.5.8",
"webpack-config": "^7.0.0",
.....
},
"nyc": {
"all": true,
"include": [
"src/**/*.js"
],
"cache": true,
"require": [
"./test/helper/registerBabel.js",
"./test/helper/setup.js"
]
}
}
registerBabel.js
require('babel-register')({
ignore: /node_modules\/(?!ProjectB)/
});
setup.js(mocha helper)
hook({
extensions: ['.css'],
generateScopedName: '[local]',
preprocessCss: (data, filename) =>
sass.renderSync({
data,
file: filename,
importer: (url) => {
if (url.indexOf('~') === 0) {
const node_modules_path = path.resolve(__dirname, '../..', 'node_modules');
return {
file: path.join(node_modules_path, url.replace('~', ''))
};
}
return {file: url};
}
}).css
});
babelrcrc
{
"presets": [
["es2015", {"modules": false}],
"stage-0",
"react"
],
"plugins": [
"react-hot-loader/babel"
],
"env": {
"development/client": {
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
},
"test": {
"presets": [
["es2015"],
"stage-0",
"react"
],
"plugins": [
["transform-runtime", {
"helpers": false,
"polyfill": false,
"regenerator": true
}]
]
}
}
}
**使用_logo.css
import React from 'react';
import logo from './_Logo.css';
import * as font from '../font/fontello.css';
class Logo extends React.Component {
render() {
return (
<div className={logo.logo +' '+font['icon-logo']}></div>
);
}
};
export default Logo;
_Logo.css
.logo {
font-size: 5rem;
}