我在测试使用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)
任何想法我可能做错了什么?