Невозможно вызвать метод toUpperCase из undefined в простом тесте React/Jest

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 список в моем package.json, Увидеть ниже:

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

Компонент прекрасно воспроизводится в реальном приложении.

Используя отладку узла, я убедился, что тест доходит до запуска render, но нет componentDidMount но кроме этого у меня нет никакой дополнительной информации или идей о том, что попробовать!

Answer 1

После обновления до более новых версий React & Jest стало ясно, что действительный компонент не создается.

PipeableOpportunity Компонент, представленный OpportunityList Компонент был экспортирован как компонент более высокого порядка, который, кажется, нарушает функциональность Jest AutoMock.

Сейчас я только что отключил AutoMock:

Jest.autoMockOff();

который работает, но, очевидно, не совсем идеально. Я подозреваю, что правильное решение состоит в том, чтобы вручную высмеять PipeableOpportunity составная часть.

Answer 2

Пытаться 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();
  });

});