Question

难倒......

我正在尝试测试组件是否已成功呈现。测试看起来像：

jest.dontMock("../opportunities/OpportunityList");

var OpportunityList = require("../opportunities/OpportunityList");
var opportunitiesArray = [];

describe("OpportunityList", function() {

  it("should render", function() {
    var opportunityList = TestUtils.renderIntoDocument(
      <OpportunityList opportunities={opportunitiesArray}
                       bucketValue="fooo"/>

    );
    expect(TestUtils.isCompositeComponent(opportunityList)).toBeTruthy();
  });

});

组件：

var PipeableOpportunity = require("./PipeableOpportunity");

var OpportunityList = React.createClass({
  getInitialState: function() {
    return {
      componentWidth: null
    };
  },

  componentDidMount: function() {
    this.setState( { componentWidth: React.findDOMNode(this).offsetWidth } );
  },

  render: function() {
    var bucketValue = this.props.bucketValue,
        opportunities = this.props.opportunities,
        componentWidth = this.state.componentWidth,
        pipelineSettings = this.props.pipelineSettings;

    var opportunityList = opportunities.map( function(opportunity) {
      return (
        <PipeableOpportunity key={opportunity.id}
                             opportunity={opportunity}
                             bucketValue={bucketValue}
                             componentWidth={componentWidth}
                             pipelineSettings={pipelineSettings}/>
      );
    });

    return (
      <ol className={bucketValue}>
        {opportunityList}
      </ol>
    );
  }

});

module.exports = OpportunityList;

运行测试会产生以下输出：

 FAIL  __tests__/OpportunityList-test.js (1.645s)
● OpportunityList › it should render
  - TypeError: Cannot call method 'toUpperCase' of undefined
        at autoGenerateWrapperClass (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDefaultInjection.js:53:19)
        at Object.getComponentClassForElement (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactNativeComponent.js:59:49)
        at ReactCompositeComponentMixin._processProps (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:429:44)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:127:28)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMultiChild.js:192:44)
        at ReactDOMComponent.Mixin._createContentMarkup (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDOMComponent.js:289:32)
        at ReactDOMComponent.Mixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDOMComponent.js:199:12)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:247:34)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at ReactCompositeComponentMixin.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactCompositeComponent.js:247:34)
        at wrapper [as mountComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactReconciler.mountComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactReconciler.js:38:35)
        at mountComponentIntoNode (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:248:32)
        at ReactReconcileTransaction.Mixin.perform (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/Transaction.js:134:20)
        at batchedMountComponentIntoNode (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:269:15)
        at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/Transaction.js:134:20)
        at Object.ReactDefaultBatchingStrategy.batchedUpdates (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactDefaultBatchingStrategy.js:66:19)
        at Object.batchedUpdates (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactUpdates.js:110:20)
        at Object.ReactMount._renderNewRootComponent (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:404:18)
        at Object.wrapper [as _renderNewRootComponent] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactMount.render (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactMount.js:493:32)
        at Object.wrapper [as render] (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactPerf.js:70:21)
        at Object.ReactTestUtils.renderIntoDocument (/home/tmillwardwright/mwri_git/piper/node_modules/react/lib/ReactTestUtils.js:52:18)
        at Spec.<anonymous> (/home/tmillwardwright/mwri_git/piper/app/assets/javascripts/components/__tests__/OpportunityList-test.js:14:37)
        at jasmine.Block.execute (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
        at jasmine.Queue.next_ (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
        at null._onTimeout (/home/tmillwardwright/mwri_git/piper/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
        at Timer.listOnTimeout [as ontimeout] (timers.js:112:15)

我在测试之前运行脚本以要求React，它位于unmockedModulePathPatterns的{{1}}列表中。见下文：

package.json

该组件在真实应用中呈现得很好。

使用节点调试我已经确定测试到了运行React = require("react/addons"); Radium = require("radium"); GlobalStyles = require("../../../GlobalStyles"); TestUtils = React.addons.TestUtils; routerStub = require("./routerStub");，但没有render，但除此之外我还没有任何进一步的信息或关于尝试什么的想法！

Answer 1

在beforeEach中尝试require正在测试的组件，而不是全局到文件：

describe("OpportunityList", function() {

  var OpportunityList = null;

  beforeEach(function() {
    OpportunityList = require("../opportunities/OpportunityList");
  });

  it("should render", function() {
    var opportunityList = TestUtils.renderIntoDocument(
      <OpportunityList opportunities={opportunitiesArray}
                   bucketValue="fooo"/>
    );
    expect(TestUtils.isCompositeComponent(opportunityList)).toBeTruthy();
  });

});

Answer 2

升级到更新版本的React＆amp;开玩笑，很明显没有创建有效的组件。

PipeableOpportunity组件呈现的OpportunityList组件被导出为高阶组件，这似乎打破了Jest的AutoMock功能。

现在我刚关闭了AutoMock：

Jest.autoMockOff();

哪个有效，但显然不太理想。我怀疑正确的解决方案是手动模拟PipeableOpportunity组件。

在简单的React / Jest测试中无法调用未定义的方法'toUpperCase'

2 个答案: