React shallow rendering

README.md

npm i react babel mocha expect

NODE_ENV=test ./node_modules/.bin/mocha --compilers js:babel/register shallow-rendering.spec.js

output

  Shallow
Warning: owner-based and parent-based contexts differ (values: `undefined` vs `foo`) for key (name) while mounting SimpleComponent (see: http://fb.me/react-context-by-parent)
    1) can pass context when shallowly rendering


  0 passing (139ms)
  1 failing

  1) Shallow can pass context when shallowly rendering:

      AssertionError: { type: 'div',
  key: null,
  ref: null,
  _owner: null,
  _context: {},
  _store:
   { props: { children: undefined },
     or deepEqual { type: 'div',
  key: null,
  ref: null,
  _owner: null,
  _context: {},
  _store:
   { props: { children: 'foo' },
     origin
      + expected - actual

         "_context": {}
         "_owner": [null]
         "_store": {
           "originalProps": {
      -      "children": [undefined]
      +      "children": "foo"
           }
           "props": {
      -      "children": [undefined]
      +      "children": "foo"
           }
         }
         "key": [null]
         "ref": [null]

      at Context.<anonymous> (shallow-rendering.spec.js:22:20)

shallow-rendering.spec.js

/**
 * We are just using the test from the react repository
 * 
 * https://github.com/facebook/react/blob/master/src/test/__tests__/ReactTestUtils-test.js#L162-L178
 */

var expect = require('expect');
var React = require('react/addons');
var ReactTestUtils = React.addons.TestUtils;

describe('Shallow rendering', function () {

  it('can pass context when shallowly rendering', function() {
    var SimpleComponent = React.createClass({
      contextTypes: {
        name: React.PropTypes.string
      },
      render: function() {
        return <div>{this.context.name}</div>;
      }
    });

    var shallowRenderer = ReactTestUtils.createRenderer();
    shallowRenderer.render(<SimpleComponent />, {
      name: "foo"
    });
    var result = shallowRenderer.getRenderOutput();
    expect(result).toEqual(<div>foo</div>);
  });

});