카르마 단위 테스트 중 이미지에 대한 404 경고를 수정하는 방법

grunt / karma / phantomjs / jasmine을 사용하여 내 지시문 (angularjs) 중 하나를 단위 테스트하고 있습니다. 내 테스트가 잘 실행됩니다.

describe('bar foo', function () {
    beforeEach(inject(function ($rootScope, $compile) {
        elm = angular.element('<img bar-foo src="img1.png"/>');
        scope = $rootScope.$new();
        $compile(elm)();
        scope.$digest();
    }));
    ....
});

하지만 나는이 404를 얻습니다

WARN [web-server]: 404: /img1.png
WARN [web-server]: 404: /img2.png
...

아무것도하지 않지만 로그 출력에 노이즈를 추가합니다. 이 문제를 해결할 방법이 있습니까? (당연히 karma의 logLevel을 변경하지 않고,보고 싶습니다.)

카르마를 구성하여로드 한 다음 요청시 제공해야하기 때문입니다.)

karma.conf.js 파일에는 이미 다음과 같은 파일 및 / 또는 패턴이 정의되어 있어야합니다.

// list of files / patterns to load in the browser
files : [
  {pattern: 'app/lib/angular.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/angular-*.js', watched: true, included: true, served: true},
  {pattern: 'app/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'app/js/**/*.js', watched: true, included: true, served: true},
  // add the line below with the correct path pattern for your case
  {pattern: 'path/to/**/*.png', watched: false, included: false, served: true},
  // important: notice that "included" must be false to avoid errors
  // otherwise Karma will include them as scripts
  {pattern: 'test/lib/**/*.js', watched: true, included: true, served: true},
  {pattern: 'test/unit/**/*.js', watched: true, included: true, served: true},
],

// list of files to exclude
exclude: [

],

// ...

자세한 정보 는 여기 에서 확인할 수 있습니다. :)

편집 : nodejs 웹 서버를 사용하여 앱을 실행하는 경우 karma.conf.js에 추가 할 수 있습니다.

proxies: {
  '/path/to/img/': 'http://localhost:8000/path/to/img/'
},

EDIT2 : 다른 서버를 사용하지 않거나 사용하지 않으려면 로컬 프록시를 정의 할 수 있지만 Karma가 사용중인 포트에 대한 액세스를 동적으로 제공하지 않기 때문에 karma가 9876 (기본값)이 아닌 다른 포트에서 시작하면 여전히 그 성가신 404를 얻으십시오 ...

proxies =  {
  '/images/': '/base/images/'
};

관련 이슈 : https://github.com/karma-runner/karma/issues/872

저에게 혼란스러운 퍼즐 조각은 '기본'가상 폴더였습니다. 그것이 당신의 조명기의 자산 경로에 포함될 필요가 있는지 모른다면 디버깅하기가 어려울 것입니다.

-으로 당 구성 문서

기본적으로 모든 자산은 http : // localhost : [PORT] / base /에서 제공됩니다.

참고 : 이것은 다른 버전에서는 사실이 아닐 수 있습니다. 저는 0.12.14에 있고 저에게는 효과가 있었지만 0.10 문서에서는 언급하지 않았습니다.

파일 패턴을 지정한 후 :

{ pattern: 'Test/images/*.gif', watched: false, included: false, served: true, nocache: false },

내 설비에서 이것을 사용할 수 있습니다.

<img src="base/Test/images/myimage.gif" />

그리고 나는 그 시점에서 프록시가 필요하지 않았습니다.

karma.conf.js 내부에 일반적인 미들웨어를 만들 수 있습니다.

먼저 더미 1px 이미지를 정의합니다 (base64를 사용했습니다).

const DUMMIES = {
  png: {
    base64: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
    type: 'image/png'
  },
  jpg: {
    base64: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAABAAEDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD3+iiigD//2Q==',
    type: 'image/jpeg'
  },
  gif: {
    base64: 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=',
    type: 'image/gif'
  }
};

그런 다음 미들웨어 기능을 정의하십시오.

function surpassImage404sMiddleware(req, res, next) {
  const imageExt = req.url.split('.').pop();
  const dummy = DUMMIES[imageExt];

  if (dummy) {
    // Table of files to ignore
    const imgPaths = ['/another-cat-image.png'];
    const isFakeImage = imgPaths.indexOf(req.url) !== -1;

    // URL to ignore
    const isCMSImage = req.url.indexOf('/cms/images/') !== -1;

    if (isFakeImage || isCMSImage) {
      const img = Buffer.from(dummy.base64, 'base64');
      res.writeHead(200, {
        'Content-Type': dummy.type,
        'Content-Length': img.length
      });
      return res.end(img);
    }
  }
  next();
}

Karma conf에 미들웨어 적용

{
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    middleware: ['surpassImage404sMiddleware'],
    plugins: [
      ...
      {'middleware:surpassImage404sMiddleware': ['value', surpassImage404sMiddleware]}
    ],
    ...
}

@glepretre의 답변에 따라 빈 .png 파일을 만들고이를 구성에 추가하여 404 경고를 숨 깁니다.

proxies: {
  '/img/generic.png': 'test/assets/img/generic.png'
}

수정하려면 karma.conf.js프록시와 함께 제공된 파일을 가리켜 야합니다.

files: [
  { pattern: './src/img/fake.jpg', watched: false, included: false, served: true },
],
proxies: {
  '/image.jpg': '/base/src/img/fake.jpg',
  '/fake-avatar': '/base/src/img/fake.jpg',
  '/folder/0x500.jpg': '/base/src/img/fake.jpg',
  '/undefined': '/base/src/img/fake.jpg'
}

오래된 스레드 임에도 불구하고 실제로 404를 제거하기 위해 실제로 내 이미지를 카르마에서 제공하는 데 몇 시간이 걸렸습니다. 댓글이 충분하지 않았습니다. 이 스크린 샷으로 솔루션을 명확히 할 수 있다고 생각합니다. 기본적으로 많은 주석이 누락 된 한 가지는 base가 내 폴더 경로에 없거나 요청에 포함되지 않더라도 프록시 값이 "/ base"로 시작해야 한다는 사실입니다 .

(슬래시가없는 "base"는 카르마가 400 BAD REQUEST를 반환 함)

이제 ng test를 실행 한 후 다음 URL에서 "./src/assets/favicon.png"를 성공적으로 제공 할 수 있습니다. http : // localhost : 9876 / test / dummy.png

내 프로젝트에서 다음 npm 패키지 버전을 사용하고 있습니다.

• 카르마 v4.3.0
• 재스민 코어 v3.2.1
• 카르마 재스민 v1.1.2
• @ angular / cli v8.3.5
• 각도 v8.2.7

구성 파일에 루트 경로가있는 경우 다음과 같이 사용할 수도 있습니다.

proxies: {
  '/bower_components/': config.root + '/client/bower_components/'
}