使用 ng test Angular 4 Karma-Jasmine 时没有 css 的显示问题

Question

我在运行命令 ng test 时出现显示问题。看来我没有 css 效果 anymore.Here 是两张图片，一张来自 ng serve，另一张来自 ng test

这是正常行为吗？我应该分享我项目中的特定文件吗？只需发表评论即可。

Answer 1

这可能为时已晚，但可能对某些人有所帮助。

转到您的karma.conf.js并添加这个

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files:[
      "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
     "src/styles.css",
    ],
     // more code below

在此示例中，我添加了 styles.css 和来自 angular material 的预建主题。

如果您还需要任何帮助，请告诉我。

Answer 2

brijmcq 提供了有关如何解决问题的深刻见解。我也一直在努力正确加载 css 字体（也加载字体文件），在我的例子中是 material 图标：

css 文件加载字体文件并在测试期间失败

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

这可以通过指示 Jasmine 也提供这些文件来解决：

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    files: [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "node_modules/material-design-icons/iconfont/material-icons.css",
      "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
      {
        pattern: 'node_modules/material-design-icons/iconfont/*',
        watched: false,
        included: false,
        served: true,
        nocache: false
      }
    ],

使用 ng test Angular 4 Karma-Jasmine 时没有 css 的显示问题

Display issue without css with ng test Angular 4 Karma-Jasmine

unit-testing

jasmine

testbed

karma-jasmine

angular