React Application Unit Testing

Question

현재 기능 테스트를 위해 Selenium을 사용하여 React 앱을 테스트하고 있습니다. Selenium은 브라우저에서 앱을 실행하고 사용자 동작을 시뮬레이션하고 각 단계에서 주장/확인을 유지하는 데 사용됩니다.

그러나 실제로 브라우저를 실행하고 페이지가로드 될 때까지 기다려야하므로 UI ​​자동화가 무거워서 이러한 테스트를 디버깅하는 것은 매우 지루합니다 (불안정한 환경에서 발생하는 고통).

나는 페이지가로드 될 때까지 기다릴 필요가 없으므로 매우 가볍고 매우 빠른 chai와 같은 프레임 워크에 대해 읽었습니다.

유사한 행에서 누군가가 나에게 UI 동작 (예 : Selenium에서와 같이)을 무시할 수있는이 응용 프로그램의 완전한 기능 테스트를 제안 할 수 있습니까? UI에서 클릭 및 시뮬레이션 사용자 작업을 수행하도록 셀레늄을 만드는 대신 반응 구성 요소를로드하고 코드를 통해 특정 사용자 동작을 시뮬레이션 한 다음 DB에서 기능 검증을 수행하고 데이터 제공 업체를 보유 할 수있는 방법이 있습니다. 내 검사를 위해서. 예를 들면 - 필자는 테스트 함수에 전달할 데이터 집합을 가지고 있으며이 테스트는 모든 데이터 집합에 대해 실행되고 각각 유지됩니다.

단위 테스트/화이트 박스 테스트 작업 같은 것이 있습니까? chai와 같은 테스트 프레임 워크가이 요구 사항에 도움이됩니까?

알고 계시면 다른 방법을 제안 해주십시오.

Answer 1

좋아, 이것은 내 프로젝트에서 사용한 테스트 스택이다.

카르마

모카

버릴

Sinon는 테스트 플러그의 일례이다 어설 라이브러리의 일례 인 테스트 프레임 워크의 일례 인 테스트 실행의 예

효소는 요소 선택의 예입니다. (JQuery와 유사)

카르마 : 테스트 러너

카르마 가짜 서버를 생성하고 가짜 서버로부터 유도 된 데이터를 사용하여 다양한 브라우저에서 테스트를 회전 테스트 실행의 유형이다. Karma는 테스트 주자이며 실제 테스트를 실행하려면 Mocha와 같은 테스트 프레임 워크가 필요합니다.

나는 webpack + karma.conf.js 파일을 사용했습니다. ~ setup 카르마 (Karma) 생태계. 코딩하는 동안 parellel에서 실행되는 테스트 케이스를 볼 수있는 명령을 설정할 수 있습니다.

모카 : 테스트 프레임 워크

다음 파일을 주장 라이브러리로 테스트 프레임 워크로 모카를 사용하고, 차이 티 :

describe('the todo.App', function() { 
    context('the todo object', function(){ 

    it('should have all the necessary methods', function(){ 
     var msg = "method should exist"; 
     expect(todo.util.trimTodoName, msg).to.exist; 
     expect(todo.util.isValidTodoName, msg).to.exist; 
     expect(todo.util.getUniqueId, msg).to.exist; 
    }); 
    }); 
}); 

모카와 차이을 구별 우리 it 블록의 내용을보고 프레임 워크 (모카) 메서드와 어설 션 라이브러리 (차이) 메서드를 구별 할 수 있습니다. it 블록 외부의 메소드는 일반적으로 테스트 프레임 워크에서 파생됩니다. it 블록 내의 모든 것은 어설 션 라이브러리에서 오는 코드입니다. beforeEach, 묘사, 문맥, 그것은 모카에서 연장 된 모든 방법입니다. 기대, 동등, 그리고 존재는 차이 (Chai)로부터 확장 된 모든 방법이다.

afterEach(function() { 
    $httpBackend.verifyNoOutstandingExpectation(); 
    $httpBackend.verifyNoOutstandingRequest(); 
    $window.localStorage.removeItem('com.shortly'); 
}); 

it('should have a signup method', function() { 
    expect($scope.signup).to.be.a('function'); 
}); 

테스트 프레임 워크와 관련된 모든 메소드가 it 블록 외부에서 발생하며 어설 션 라이브러리와 관련된 모든 메소드가 it 블록 내부에서 발생합니다. 따라서 it 블록 내부에서 발생하는 모든 것이 테스트 프레임 워크보다 낮은 추상화 수준에서 실제로 발생한다고 결론을 내릴 수 있습니다.

또는 우리 분류 스키마의 측면에서 it 블록 내부에서 발생하는 모든 것은 어설 션 라이브러리의 일부이거나 테스트 플러그인의 일부입니다. 블록 내부의 모든 것이 테스트 프레임 워크보다 낮은 수준의 추상화에서 발생한다는 것은 휴리스틱 (heuristic) 즉, 단지 경험의 법칙 일뿐입니다.

Sinon : 테스트 플러그인

Sinon는 차이에 후크 우리에게 테스트의보다 다양한 설정을 수행 할 수있는 기능을 제공하는 플러그인입니다.

describe('API integration', function(){ 
    var server, setupStub, JSONresponse; 

    beforeEach(function() { 
    setupStub = sinon.stub(todo, 'setup'); 
    server = sinon.fakeServer.create(); 
    }); 

    it('todo.setup receives an array of todos when todo.init is called', function() { 
    }); 

    afterEach(function() { 
    server.restore(); 
    setupStub.restore(); 
    }); 
}); 

Sinon은 당신이 정말로 당신의 소스 코드의 이구 석 저 구석에 들어가 정말 무슨 일이 일어나고 있는지 볼 수 있도록 멋진 기능의 무리를 가지고 다음 Sinon 플러그인을 통해 우리는 모의 객체, 스텁, 가짜 서버를 만들 수 있습니다 후드 아래에.

당신은뿐만 아니라

이벤트 핸들러의 스파이 기능을 사용하여이 방향을 제공해야한다 생각 할 수있다. Source