在 ReactJS 中存根 mixin 函数

Question

我正在测试一个使用 react-router 的 isActive 的 React 组件。为此，我试图存根 isActive 以返回 true 但无济于事。

测试结果：

   1) MyComponent Component "before all" hook for "should render ":
 TypeError: Cannot read property 'isActive' of undefined
  at [object Object].State.(anonymous function) (node_modules/react-router/lib/State.js:46:18)
  at [object Object].renderContent (src/components/MyComponent.jsx:48:19)
  at [object Object].render (src/components/MyComponent.jsx:40:31)
  at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:789:34)
  at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:816:14)
  at [object Object].wrapper [as _renderValidatedComponent] (node_modules/react/lib/ReactPerf.js:70:21)
  at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:237:30)
  at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:70:21)
  at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:38:35)
  at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:248:32)
  at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:134:20)
  at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:269:15)
  at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:134:20)
  at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:66:19)
  at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:110:20)
  at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:404:18)
  at Object.wrapper [as _renderNewRootComponent] (node_modules/react/lib/ReactPerf.js:70:21)
  at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:493:32)
  at Object.wrapper [as render] (node_modules/react/lib/ReactPerf.js:70:21)
  at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:52:18)
  at Context.<anonymous> (tests/components/MyComponent.spec.js:36:37)

组件：

'use strict';

var MyComponent = require('MyComponent.jsx'),

    React = require('react/addons'),
    ReactTestUtils = React.addons.TestUtils,

    sinon = require('sinon'),
    expect = require('chai').expect;


describe('Test Component', function() {

before(function () {

    sinon.stub(MyComponent.prototype,'isActive').returns(true);
    this.component = ReactTestUtils.renderIntoDocument(
      <MyComponent />
    );

  });

   it('should render MyComponent component', function(){
    expect(this.component).toBeDefined();
  });


});

Answer 1

在存根 mixin 方法时尝试使用 jasmine-react library。