어떻게 webpack의 require.ensure를 스텁합니까?

webpack의 코드 분할 기능 (require.ensure)을 사용하여 비동기 적으로로드되는 별도의 번들에서 페이지로드에 표시되지 않는 구성 요소를로드하여 내 React 응용 프로그램의 초기 번들 크기를 줄입니다.어떻게 webpack의 require.ensure를 스텁합니까?

이것은 완벽하게 작동합니다. 그러나 단위 테스트를 작성하는 데 어려움이 있습니다.

내 테스트 설정은 Mocha, Chai 및 Sinon을 기준으로합니다. 테스트를 실행하는 경우

describe('When I render the component',() => { 
    let component, 
     mySandbox; 
    beforeEach(() => { 
     mySandbox = sandbox.create(); 
     mySandbox.stub(require, 'ensure'); 
     component = mount(<PageHeader />); 
    }); 
    describe('the rendered component',() => 
     it('contains the SideNav component',() => 
      component.find(SideNav).should.have.length(1) 
     ) 
    ); 
    afterEach(() => mySandbox.restore()); 
});

, 나는이 오류 메시지가 얻을 : 여기

내가 지금까지 시도 코드에서 관련 발췌 한 것입니다에 대한 후크 "각 전에"

"를 포함 SideNav 구성 요소 ": 존재하지 않는 자체 속성을 스텁 할 수 없음

이것은 require.ensure이 bpack 번들을 사용하지만 테스트를 webpack에 번들로 묶는 것이 아니라 원하는대로 할 수 있습니다. 오버 헤드가 많고 테스트 실행 시간이 길어질 수 있기 때문입니다.

그래서 제 질문은 :

는 웹팩을 통해 테스트를 실행하지 않고 웹팩의 require.ensure Sinon와 스텁 수있는 방법이 있습니까? 그래서 require.ensure 주위에 시험에 필요한 모듈에서이 독특한 require를 얻을 수 require을 추상화의 어떤 종류가 있고 그 require에 ensure()의 모의를 추가하는 것입니다 조롱 할 수있는 유일한 방법을 필요로

출처

2017-05-22 Patrick Hund

정확합니다. 모든 모듈에는 고유 한'require' 기능이 있습니다. 내가 생각했던 것보다 꽤 복잡합니다. 자세한 내용은 [here] (http://fredkschott.com/post/2014/06/require-and-the-module-system/)에서 확인할 수 있습니다. 원숭이 패치'require.esnure'는 매우 어려울 것입니다. @hinok이 제안한 babel-plugin-rewire와 같은 것을 고려해 볼 것을 제안합니다. –

문제점에 대한 답변이 여기에 있습니다. https://stackoverflow.com/questions/33070482/writing-tests-for-javascript-module-using- webpacks-require-sure-function –

문제는 필자가 프로젝트를 시작할 때 rewire를 사용하여 평가 한 결과, Mockery가 훨씬 우수하다는 것을 알았 기 때문에 그 게시물에서 rewire 솔루션을 사용하는 방법을 알아 내야 할 것입니다. 조롱. –

각 모듈은 자신의 인스턴스가 예.

당신은 babel-plugin-rewire을 사용하고

const require = myComponent.__get__('require'); 
require.ensure =() => { /* mock here */};

처럼 require를 얻을 수 게터를 사용할 수있는 I 아니에요 100 %가 작동하지만 확실히 내가이 방향으로 이동하려고 할 것입니다 있는지 확인합니다. 귀하의 문제와 관련이 있고 많은 것을 설명하는 github에서 this issue을 읽는 것이 좋습니다.

출처

2017-05-28 12:01:36 hinok

어떻게 webpack의 require.ensure를 스텁합니까?

답변

관련 문제