Angular2 Jasmine 测试图像源

Question

我在模板中有一个带有图像的组件

 <div class="logo"><img src="../images/logo.png"/></div>

当运行 karma 任务抛出这样的错误

Uncaught Error: Cannot find module "../images/logo.png"

提到应用程序可以很好地呈现图像，只有业力在抱怨。

如有任何建议，我们将不胜感激。

Answer 1

假设您使用 karma-jasmine 来运行测试。这些文件将托管在端口 9876 上。

假设您的 img src 是 ./assets/images/logo.png，那么您应该期望 src 是 http://localhost:9876/assets/images/logo.png 而不仅仅是 ./assets/images/logo.png

Answer 2

您可以尝试这样的操作：

it('should render the logo', async(() => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  expect(compiled.querySelector('div.logo>img').src).toContain('/images/logo.png');
}));

Answer 3

您还可以在 karma.conf.js 中使用代理和文件属性来提供文件并对其进行代理。

添加要在文件中提供的文件属性

{ pattern: './src/assets/**', watched: false, included:false, served:true, nocache:false }

还要使用不同的 url/ 路径代理这些文件，更新代理属性

proxies: {
   '/assets/': '/base/src/assets/'
}

现在，当您尝试访问 http://localhost:9876/assets/logo.png 时，它将是对 src/assets/logo.png 的代理调用（所有 src 资产也可以像这样访问 http://localhost:9876/base/src/assets/logo.png ）

Angular2 Jasmine 测试图像源

Angular2 Jasmine Test Image Source

karma-jasmine

gulp-karma

angular