測試連接成分反應/終極版

Question

我想測試我的我的反應，和/終極版應用程序的連接成分，我寫了一些這實際上引發錯誤測試用例：

App component › shows account info and debits and credits` 

Invariant Violation: Could not find "store" in either the context or props of "Connect(AccountInfo)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(AccountInfo)". 

測試用例其中特羅錯誤app.test.js在下面。我的問題是，我不明白我應該怎麼包裝這裏由Connect()因爲我沒有使用AccountInfo這裏：

import React from 'react'; 
import { mount } from 'enzyme'; 
import { Provider } from 'react-redux'; 
import App from './App'; 
import * as actions from '../../actions'; 

function setup() { 
    const props = { 
    errorMessage: null, 
    actions 
    }; 

    const enzymeWrapper = mount(<App {...props} />); 

    return { 
    props, 
    enzymeWrapper, 
    }; 
} 

describe('App component',() => { 
    it('shows account info and debits and credits`',() => { 
    const {enzymeWrapper} = setup(); 
    expect(enzymeWrapper.find('.account-info').exists()).toBe(true); 
    expect(enzymeWrapper.find('.debits-and-credits').exists()).toBe(true); 
    }); 

    it('shows error message',() => { 
    const {enzymeWrapper} = setup(); 
    enzymeWrapper.setProps({ errorMessage: 'Service Unavailable' }); 
    expect(enzymeWrapper.find('.error-message').exists()).toBe(true); 
    }); 
}); 

我containers/app.js：

import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actions from '../actions'; 
import AppComponent from '../components/App/App'; 

const mapStateToProps = state => ({ 
    isFetching: state.balance.isFetching, 
    errorMessage: state.errorMessage, 
}); 

const mapDispatchToProps = dispatch => ({ 
    actions: bindActionCreators(actions, dispatch), 
}); 

const AppContainer = connect(mapStateToProps, mapDispatchToProps)(AppComponent); 

export default AppContainer; 

組件app.js：

import React, { Component } from 'react'; 
import ErrorMessage from '../../containers/ErrorMessage'; 
import AccountInfo from '../../containers/AccountInfo'; 
import DebitsAndCredits from '../../containers/DebitsAndCredits'; 
import './App.css'; 

const AppComponent =() => 
    <div className="app"> 
    <AccountInfo /> 
    <DebitsAndCredits /> 
    </div>; 

export class App extends Component { 
    componentWillMount() { 
    const { actions } = this.props; 
    actions.fetchBalance(); 
    } 

    render() { 
    const { errorMessage } = this.props; 
    return errorMessage ? <ErrorMessage /> : <AppComponent />; 
    } 
} 

export default App; 

UPD：

我更新了我的測試案例，現在它看起來像：

import React from 'react'; 
import { mount } from 'enzyme'; 
import { Provider } from 'react-redux'; 
import configureMockStore from 'redux-mock-store'; 
import createSagaMiddleware from 'redux-saga'; 
import { initialState } from '../../reducers/balance/balance'; 
import App from './App'; 
import * as actions from '../../actions'; 

const middlewares = [createSagaMiddleware]; 
const mockStore = configureMockStore(middlewares); 
const store = mockStore(initialState); 

function setup() { 
    const props = { 
    errorMessage: null, 
    actions, 
    }; 

    const enzymeWrapper = mount(
    <Provider store={store}> 
     <App {...props} /> 
    </Provider> 
); 

    return { 
    props, 
    enzymeWrapper, 
    }; 
} 

describe('App component',() => { 
    it('shows account info and debits and credits`',() => { 
    const { enzymeWrapper } = setup(); 
    expect(enzymeWrapper.find('.account-info').exists()).toBe(true); 
    expect(enzymeWrapper.find('.debits-and-credits').exists()).toBe(true); 
    }); 

    it('shows error message',() => { 
    const { enzymeWrapper } = setup(); 
    enzymeWrapper.setProps({ errorMessage: 'Service Unavailable' }); 
    expect(enzymeWrapper.find('.error-message').exists()).toBe(true); 
    }); 
}); 

現在我的錯誤是：

App component › shows account info and debits and credits` 

    TypeError: Cannot read property 'account' of undefined 

UPD 2：

我initialState我把我創建模擬商店：

const initialState = { 
    isFetching: false, 
    account: {}, 
    currency: '', 
    debitsAndCredits: [], 
}; 

我AccountInfo組件：

import React from 'react'; 

const AccountInfo = ({ account, currency }) => 
    <header className="account-info"> 
    <p>{account.name}</p> 
    <p> 
     IBAN: {account.iban}<br /> 
     Balance: {account.balance}<br /> 
     Currency: {currency}<br /> 
    </p> 
    </header>; 

export default AccountInfo; 

Answer 1

爲了測試所連接的組件，你需要模擬提供商，而且，因爲從終極版店冰錐連接狀態變量。

做這個

const enzymeWrapper = mount (<Provider store={mockStore}><App {...props}/></Provider>) 

您需要模擬了Redux店了。

編輯1：

只是看你AccountInfo組件它告訴我，你在道具期待帳戶在這裏。

AccountInfo = ({account}) => 

所以這意味着App.js必須在道具中傳遞帳號的值。貨幣一樣。