我正在尝试在我编写的javascript模块上运行一些单元测试。
测试很简单:
import {FornaContainer} from '../app/scripts/fornac.js';
describe('A forna container', function() {
it('should accept a colorscheme', function() {
});
});
问题是在../app/scripts/fornac.js
中我导入了一个 css 文件:
import '../styles/fornac.css';
这会导致茉莉花产生以下错误:
events.js:72
throw er; // Unhandled 'error' event
^
SyntaxError: /home/mescalin/pkerp/projects/fornac/app/styles/fornac.css: Unexpected token (1:4)
> 1 | svg {
| ^
2 | display: block;
3 | min-width: 100%;
4 | width: 100%;
at Parser.pp.raise (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
at Parser.pp.unexpected (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
at Parser.pp.semicolon (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:2894:38)
at Parser.pp.parseExpressionStatement (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:2264:8)
at Parser.pp.parseStatement (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:1955:17)
at Parser.pp.parseBlockBody (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:2294:21)
at Parser.pp.parseTopLevel (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:1823:8)
at Parser.parse (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:1396:17)
at Object.parse (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/node_modules/babylon/index.js:45:50)
at File.parse (/home/mescalin/pkerp/projects/fornac/node_modules/babel-core/lib/transformation/file/index.js:480:24)
删除 fornac.js
中的import ../styles/fornac.css
行可消除错误。
关于如何在没有收到有关 css 导入错误的情况下测试我的 javascript 文件的任何想法?
编辑
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname + '/app',
entry: {fornac: './scripts/fornac.js',
rnaplot: ['./scripts/rnaplot.js'],
rnatreemap: './scripts/rnatreemap.js'},
output: {
path: __dirname + '/build',
filename: '[name].js',
libraryTarget: 'umd',
library: '[name]'
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}, {
test: /.css$/,
loader: 'style!css'
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
您可能需要
在文件导入前面加上加载器,css
,根据 css-loader 文档:
import 'css!../styles/fornac.css';