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

Jasmine complains about imported css in unit tests

本文关键字：导入 css 单元测试 Jasmine      更新时间：2023-09-26

我正在尝试在我编写的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';
相关文章：