React.js 구성 요소 모양을 테스트하는 방법은 무엇입니까?

Question

구성 요소의 스타일을 하나씩 개별적으로 테스트해야합니다.

저는 Outlook을 설명 할 수 있고 실제 구성 요소를 실제 DOM 레이아웃으로 렌더링 한 다음 테스트 프레임 워크에 제공한다고 생각했기 때문에 Galen framework에 적합합니다. 그러나 이해 했으므로 ' URL 레이아웃에 의해서만 DOM 레이아웃을 테스트합니다.

아마도 React.js 응용 프로그램의 GUI를 테스트 한 경험이 있습니까?

Answer 1

한국어를 사용 React's TestUtils 함께 Jest 테스트 프레임 워크를 추천한다. 지금까지, 이것은 나를 위해 상당히 잘 작동했습니다.

다른 JavaScript 모듈과 비슷한 방식으로 React 구성 요소의 단위 테스트를 작성할 수 있습니다. 자신의 농담 소개에서

: 다른 자바 스크립트 프레임 워크와의 통합은 현재 구현되어 있지 않으므로

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 
import CheckboxWithLabel from '../CheckboxWithLabel'; 

describe('CheckboxWithLabel',() => { 

    it('changes the text after click',() => { 
    // Render a checkbox with label in the document 
    const checkbox = TestUtils.renderIntoDocument(
     <CheckboxWithLabel labelOn="On" labelOff="Off" /> 
    ); 

    const checkboxNode = ReactDOM.findDOMNode(checkbox); 

    // Verify that it's Off by default 
    expect(checkboxNode.textContent).toEqual('Off'); 

    // Simulate a click and verify that it is now On 
    TestUtils.Simulate.change(
     TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input') 
    ); 
    expect(checkboxNode.textContent).toEqual('On'); 
    }); 

}); 

Answer 2

구성 요소 기반 테스트는 현재 불가능합니다. 하지만 통합/E2E 테스트를 위해 Galen을 사용할 수 있습니다.