React renderToString component unit testing

Question

Background

I am using React starter kit for my react application. Inside the server.js they are rendering component using renderToStaticMarkup and then passing it to Html component which include it using dangerouslySetInnerHTML as you can see here

I am trying to create a unit test for my AboutUs page. But because it was rendered as string inside the html component, the unit test does not work for it because it is unable to find this component

UNIT TEST

/*REACT*/
var React = require('react');
import ReactDOM from 'react-dom/server';
var TestUtils = require('react-addons-test-utils');

/*Components*/
var AboutUsPage = require('../../src/components/AboutUsPage');
var App = require('../../src/components/App');
var Html = require('../../src/components/Html');

/*UNIT TESTING*/
import sd from 'skin-deep';
var expect = require("chai").expect;

describe('AboutUsPage component', function(){
  let tree;
  let aboutElement;
  before('render and locate element', function() {
    const data = { title: '', description: '', css: '', body: '' };
    const css = [];
    const context = {
      onInsertCss: value => css.push(value),
      onSetTitle: value => data.title = value,
      onSetMeta: (key, value) => data[key] = value,
      onPageNotFound: () => statusCode = 404,
    };
    data.body = ReactDOM.renderToString(<App context={context}><AboutUsPage /></App>);
    data.css = css.join('');

    tree = sd.shallowRender(<Html {...data} />);
    aboutElement = tree.dive(['App','AboutUsPage']); //could not find App or AboutUsPage components
  });

  it('it should have text hi"', function() {
    expect(tree.subTree('.htmlHead').text()).to.equal("hi"); //pass because it was in html component
  });
  it('it should have text hello"', function() {
    expect(aboutElement.subTree('.aboutHead').text()).to.equal("hello"); //fail because it was in aboutus component
  });
});

I am using mocha , chai & skin-deep for shallow rendering.

So how to write a unit test for the component which was rendered as string?

Answer 1

That is not a unit test. Consider what you are really trying to test. Is it a complete integration test of the server side rendering of AboutUsPage, or a AboutUsPage unit test?

If you only want to test AboutUsPage, then test that, and don't bring the rest of the components to the party. That is what a unit test is - testing individual units of code. So instead of

tree = sd.shallowRender(<Html {...data} />);

just use

tree = sd.shallowRender(<AboutUsPage />);

and do your AboutUsPage related assertions on tree .

If however you want to test the whole chain, then there are several options. You already have the rendered markupstring in data.body, so you can always do some string operation and check that it contains what you're looking for. A better option might be to use a tool like jsdom that enables you to operate on the DOM in a Node environment, and use normal DOM selectors to run your assertions against.

If you really want to do your testing in a "real" environment, run your tests using PhantomJS , a headless browser that can be used with a whole bunch of test frameworks ( http://phantomjs.org/headless-testing.html ).

React renderToString component unit testing

Question

1 answers

solution1
0 2016-03-23 09:23:47

React renderToString component unit testing

Question

1 answers

solution1 0 2016-03-23 09:23:47

solution1
0 2016-03-23 09:23:47