Question

我刚刚开始进行反应测试，试图使用浅层渲染。

我无法弄清楚这里发生了什么 - 我相信我的代码会遵循我在示例中看到的所有说明（例如http://racingtadpole.com/blog/test-react-with-jest/）

但我使用shallowRenderer.getRenderOutput();

获取空值

另外我很困惑，因为当我注销shallowRenderer时，我没有看到任何getRenderOutput方法？

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

});

结果输出：

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

Answer 1

我是个白痴。我只是没有模拟我的组件

jest.dontMock('../../components/shared/Icon.jsx');

反应测试：浅渲染 - getRenderOutput返回null

1 个答案: