karma-runner - 使用 Webstorm 调试器在 Karma 测试中包含 CSS

Question

我正在为单页应用程序使用 Backbone.js 和 RequireJs。

当我运行我的 karma 测试时，没有包含 css。调试时很难知道发生了什么或为什么某些东西不起作用，因为 html 元素的样式与生产应用程序中的样式不同。

在使用 webstorm 调试时是否可以在 karma 测试中包含 css？

我已经尝试在文件数组中包含所有 css

files: [
    {pattern: 'app/css/*.css', included: false},
    ...
],

这是包含在生产应用程序的 index.html 中的 css 文件，在 karma 配置中我找不到任何地方可以添加这样的东西。

<link rel="stylesheet" href="css/styles.css" />

Answer 1

我解决了:

1. 您需要将所有的 css 添加到您的 karma.conf"file"数组。

   files: [
       {pattern: 'app/**/*.css', included: false},
       ...
   ],
   

2. 创建一个名为 test_css.js 的新模块，此文件的位置将取决于您的文件夹结构。在这里，您需要以编程方式将所有 css 文件注入(inject)到当前文档中。

   define(function(require) {
       "use strict";
   
       require('jquery');
   
       //Modify to suit your requirements
       $('body').append('<link rel="stylesheet" href="/base/app/css/styles.css" />');
   
   });
   

3. 将此模块作为 deps 数组的一部分包含在 test-main.js

   中

   requirejs.config({
       baseUrl: '/base/app/js',
   
       paths: {
           ...
           'test.css' : '../test_utils/test_css'
       },
   
       // ask Require.js to load these files (all our tests)
       deps: ['test.css'].concat(tests),
   
       // start test run, once Require.js is done
       callback: window.__karma__.start
   });