2

I need to test my component's styles one by one separatly from each other.

I've looked into the Galen framework which is suitable for that because I can describe the outlook and I thought to render React components to the real DOM layout and then give it to the test framework, but as I understood it can't test given DOM layout, only by URL's.

Maybe you have some experience in testing the GUI of React.js applications?

TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
aspirisen
  • 965
  • 13
  • 29

2 Answers2

1

Facebook is using and recommending the Jest test framework together with React's TestUtils. So far, this has worked fairly well for me.

It allows you to write unit tests for React components in a similar way as for other JavaScript modules.

From their Jest intro:

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');
  });

});
TimoStaudinger
  • 41,396
  • 16
  • 88
  • 94
  • thanks for replay, maybe I didn't express it clear in the question but I asked about testing outlook. I mean I need to test i.e. that elements in my component don't overlap each other or that text wraps correctly and doesn't go under some element. I have to test styles but not behaviour – aspirisen Jun 25 '16 at 21:52
1

component based tests are currently not possible, because integration with other JavaScript framework is currently not implemented. But you can use Galen for a integration/E2E test

hypery2k
  • 1,681
  • 15
  • 20