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)
私が間違っている可能性のあるアイデアはありますか?