I'm just getting started with react testing, trying to use shallow rendering.
I can't figure what's going on here - I believe my code follows all instructions I've seen with examples (e.g. http://racingtadpole.com/blog/test-react-with-jest/)
but I'm getting null with shallowRenderer.getRenderOutput();
Additionally I'm confused as when I log out shallowRenderer, I don't see any getRenderOutput method??
import React from 'react/addons';
import Icon from '../../components/shared/Icon.jsx';
const TestUtils = React.addons.TestUtils;
function getRenderOutput(elt) {
console.log('elt: ', elt);
const shallowRenderer = TestUtils.createRenderer();
shallowRenderer.render(elt);
console.log('shallowRenderer: ', shallowRenderer);
const output = shallowRenderer.getRenderOutput();
console.log('output: ', output);
return output;
}
describe('<Icon />', () => {
it('should pass props through', () => {
const result = getRenderOutput(<Icon type='octicon' name='file-directory' classNames="icon-roomy icon-muted" />);
console.log('result: ', result);
});
});
And the resulting output:
elt:
{ type:
{ [Function: Icon]
_isMockFunction: true,
mock: { calls: [], instances: [] },
mockClear: [Function],
mockReturnValueOnce: [Function],
mockReturnValue: [Function],
mockImpl: [Function],
mockImplementation: [Function],
mockReturnThis: [Function],
_getMockImplementation: [Function],
defaultProps: { type: 'fa', classNames: '' },
propTypes:
{ type: [Object],
name: [Object],
prefix: [Object],
classNames: [Object],
title: [Object] } },
key: null,
ref: null,
_owner: null,
_context: {},
_store:
{ props:
{ type: 'octicon',
name: 'file-directory',
classNames: 'icon-roomy icon-muted' },
originalProps:
{ type: 'octicon',
name: 'file-directory',
classNames: 'icon-roomy icon-muted' } } }
shallowRenderer: { _instance:
{ _currentElement:
{ type: [Object],
key: null,
ref: null,
_owner: null,
_context: {},
_store: [Object] },
_rootNodeID: '.0',
_instance:
{ getClassNames: [Object],
render: [Object],
setState: [Object],
forceUpdate: [Object],
props: [Object],
context: {},
refs: {},
_reactInternalInstance: [Circular],
state: null },
_pendingElement: null,
_pendingStateQueue: null,
_pendingReplaceState: false,
_pendingForceUpdate: false,
_renderedComponent: { _renderedOutput: null, _currentElement: [Object] },
_context: {},
_mountOrder: 1,
_isTopLevel: false,
_pendingCallbacks: null } }
output: null
result: null
