2

我在测试使用 connectToStores 的 React 组件时遇到了问题——我真的只需要确保在对我的组件执行某个用户操作（点击）时，我的上下文会执行正确的操作。

简化的示例组件：

import Immutable from 'immutable';
let {Map} = Immutable;
import { connectToStores, provideContext } from 'fluxible/addons';
import TestActions from '../actions/TestActions'
import TestStore from '../stores/TestStore'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: Map({
        index: 0
      })
    }
  }
  static contextTypes = {
    getStore: React.PropTypes.func.isRequired,
    executeAction: React.PropTypes.func.isRequired
  }
  nextClick = () => {
    let x = 100;
    this.context.executeAction(TestActions.someAction, x);
  }
  render() {
    return (<div ref="test" onClick={this.nextClick}>Test</div>)
  }
}

MyComponent = connectToStores(MyComponent, [TestStore], (stores, props) => {
 return {
    someStoreProp: stores.TestStore.someStoreProp;
 }
}

export default MyComponent;

简化测试：

jest.dontMock('../components/match/bhp-select');

import React from 'react/addons';
let TestUtils = React.addons.TestUtils;
let MyComponent = require('../components/MyComponent');
let TestStore = require('../stores/TestStore');
import {createMockComponentContext} from 'fluxible/utils';

describe('MyComponent', function() {
  let myComponent;
  let componentContext;

  beforeEach (function () {
    componentContext = createMockComponentContext({
      stores: [TestStore]
    });
  });

  it("Sample test with expectation", function() {
    let myComponent = TestUtils.renderIntoDocument(
      <MyComponent context={componentContext} />
    );
    TestUtils.Simulate.click(myComponent.refs.test.getDOMNode());
      //some expectation goes here
    });
});

当我尝试运行此测试时，我看到以下错误jest

TypeError: Cannot read property 'toUpperCase' of undefined`
        at autoGenerateWrapperClass (/Users/me/Projects/test/node_modules/react/lib/ReactDefaultInjection.js:52:18)
            at Object.getComponentClassForElement (/Users/me/Projects/test/node_modules/react/lib/ReactNativeComponent.js:59:49)
            at ReactCompositeComponentWrapper._processProps (/Users/me/Projects/test/node_modules/react/lib/ReactCompositeComponent.js:355:44)
            at ReactCompositeComponentWrapper.mountComponent (/Users/me/Projects/test/node_modules/react/lib/ReactCompositeComponent.js:127:28)
            at ReactCompositeComponentWrapper.wrapper [as mountComponent] (/Users/me/Projects/test/node_modules/react/lib/ReactPerf.js:66:21)
            at Object.mountComponent (/Users/me/Projects/test/node_modules/react/lib/ReactReconciler.js:38:35)
            at mountComponentIntoNode (/Users/me/Projects/test/node_modules/react/lib/ReactMount.js:232:32)
            at ReactReconcileTransaction.perform (/Users/me/Projects/test/node_modules/react/lib/Transaction.js:130:20)
            at batchedMountComponentIntoNode (/Users/me/Projects/test/node_modules/react/lib/ReactMount.js:247:15)
            at ReactDefaultBatchingStrategyTransaction.perform (/Users/me/Projects/test/node_modules/react/lib/Transaction.js:130:20)
            at Object.batchedUpdates (/Users/me/Projects/test/node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
            at Object.batchedUpdates (/Users/me/Projects/test/node_modules/react/lib/ReactUpdates.js:96:20)
            at Object._renderNewRootComponent (/Users/me/Projects/test/node_modules/react/lib/ReactMount.js:349:18)
            at Object.wrapper [as _renderNewRootComponent] (/Users/me/Projects/test/node_modules/react/lib/ReactPerf.js:66:21)
            at Object.render (/Users/me/Projects/test/node_modules/react/lib/ReactMount.js:406:32)
            at Object.wrapper [as render] (/Users/me/Projects/test/node_modules/react/lib/ReactPerf.js:66:21)
            at Object.renderIntoDocument (/Users/me/Projects/test/node_modules/react/lib/ReactTestUtils.js:52:18)
            at Spec.<anonymous> (/Users/me/Projects/test/__tests__/testComponent.jsx:44:40)
            at jasmine.Block.execute (/Users/me/Projects/test/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:1065:17)
            at jasmine.Queue.next_ (/Users/me/Projects/test/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2098:31)
            at null._onTimeout (/Users/me/Projects/test/node_modules/jest-cli/vendor/jasmine/jasmine-1.3.0.js:2088:18)
            at Timer.listOnTimeout (timers.js:89:15)

有什么想法我可能做错了吗？

4

0 回答 0