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

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 的测试前的脚本，它在我的 package.json 的 unmockedModulePathPatterns 列表中。见下文：

React = require("react/addons");
Radium = require("radium");
GlobalStyles = require("../../../GlobalStyles");
TestUtils = React.addons.TestUtils;
routerStub = require("./routerStub");

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

使用节点调试我已经确定测试达到了运行 render，但没有达到 componentDidMount 但除此之外我没有得到任何进一步的信息，或者关于尝试什么的想法！

Answer 1

尝试 require在 beforeEach 中而不是全局地在文件中测试您的组件：

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 & Jest 的最新版本后，很明显没有创建有效的组件。

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

现在我刚刚关闭了 AutoMock：

Jest.autoMockOff();

这可行，但显然不是很理想。我怀疑正确的解决方案是手动模拟 PipeableOpportunity 组件。

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

Cannot call method 'toUpperCase' of undefined in simple React/Jest test

javascript

reactjs

jestjs

reactjs-testutils