Как проверить внешний вид React.js?

Question

Мне нужно каждый раз проверять стили моих компонентов друг от друга.

Я изучил Galen framework, который подходит для этого, потому что я могу описать внешний вид, и я подумал о том, чтобы визуализировать компоненты React на реальном макете DOM, а затем передать его в тестовую структуру, но, как я понял, t, учитывая макет DOM, только по URL-адресу.

Возможно, у вас есть опыт тестирования GUI приложений React.js?

Answer 1

Facebook использует и рекомендует испытательный каркас Jest вместе с React's TestUtils. До сих пор это работало довольно хорошо для меня.

Это позволяет писать модульные тесты для компонентов React аналогично другим модулям JavaScript.

С их Jest интро: тесты, основанные

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

компонентов в настоящее время не представляется возможным, так как интеграция с другими рамками JavaScript в настоящее время не осуществляется. Но вы можете использовать Galen для теста интеграции/E2E