下のコンポーネントを非常に基本的なものに貼り付けました。コンポーネントがマウントされると、基本的にはfetchMessage
アクションが呼び出され、APIからメッセージが返されます。そのメッセージはmapStateToProps
機能でstate.feature.message
と設定されます。接続されているReduxコンポーネントをテストする際のヒント
私はこのコンポーネントのテストを開始する場所を完全に失っています。使用してレンダリングする場合それは正しいmessage
プロパティを表示したり、持っている)props
でfetchMessage
機能が
3と呼ばれている)特徴成分が
2レンダリングされます)
1:私は、私はそれをテストしたいことを知っていますその
私が試したファイルは、以下のように設定してみましたが、試したすべてのエラーが発生したあと、繰り返しエラーが発生します。
私が間違っていることを誰かが正しい方向に向けることができますか?
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from './actions';
class Feature extends Component {
static propTypes = {
fetchMessage: PropTypes.func.isRequired,
message: PropTypes.string
}
componentWillMount() {
this.props.fetchMessage();
}
render() {
return (
<div>{this.props.message}</div>
);
}
}
function mapStateToProps(state) {
return { message: state.feature.message };
}
export default connect(mapStateToProps, actions)(Feature);
テストファイル:
import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import expect from 'expect';
import { shallow, render, mount } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
import Feature from '../index';
const mockStore = configureStore([thunk]);
describe('<Feature />',() => {
let store;
beforeEach(() => {
store = mockStore({
feature: {
message: 'This is the message'
}
});
});
it('renders a <Feature /> component and calls fetchMessage',() => {
const props = {
fetchMessage: sinon.spy()
};
const wrapper = mount(
<Provider store={store}>
<Feature {...props} />
</Provider>
);
expect(wrapper.find('Feature').length).toEqual(1);
expect(props.fetchMessage.calledOnce).toEqual(true);
});
});
「UnconnectedFeature」を明示的にエクスポートしていないのですか? – JoeTidee
名前付きインポートを更新していただきありがとうございます – therewillbecode