Question

我正在尝试在我写的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';

这会导致jasmine产生以下错误：

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)

删除import ../styles/fornac.css中的fornac.js行会删除错误。

如何测试我的javascript文件而不会收到有关css导入的错误的任何想法？

修改

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']
    }
  }
};

Answer 1

根据css-loader docs，您可能需要使用加载程序css为文件导入添加前缀：

import 'css!../styles/fornac.css';

Jasmine在单元测试中抱怨导入的css

1 个答案: