Come posso scrivere un test unitario per un componente reattivo che chiama mapStateToProps di reduxjs?

Question

Sto provando a scrivere i test unitari per un componente contenitore chiamato AsyncApp ma ottengo il seguente errore "mapStateToProps deve restituire un oggetto, ma ricevuto non definito."

Questo è il mio set-up.

Root.js

import configureStore from '../configureStore'; 
import React, { Component } from 'react'; 
import { Provider } from 'react-redux'; 
import AsyncApp from './AsyncApp'; 

const store = configureStore(); 

export default class Root extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <AsyncApp /> 
     </Provider> 
    ); 
    } 
} 

configureStore.js

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import createLogger from 'redux-logger'; 
import rootReducer from './reducers'; 

const loggerMiddleware = createLogger(); 

const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware 
    //loggerMiddleware 
)(createStore); 

export default function configureStore(initialState) { 
    return createStoreWithMiddleware(rootReducer, initialState); 
} 

AsyncApp.js

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { foo } from '../actions'; 
import FooComponent from '../components/FooComponent'; 

class AsyncApp extends Component { 
    constructor(props) { 
    super(props); 
    this.onFoo= this.onFoo.bind(this); 
    this.state = {}; // <--- adding this doesn't fix the issue 
    } 

    onFoo(count) { 
    this.props.dispatch(foo(count)); 
    } 

    render() { 
    const {total} = this.props; 

    return (
     <div> 
     <FooComponent onFoo={this.onFoo} total={total}/> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return state; 
} 

export default connect(mapStateToProps)(AsyncApp); 

sto passando store direttamente a AsyncApp nel mio test per evitare di ottenere il seguente errore di runtime: Could not find "store" in either the context or props of "Connect(AsyncApp)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(AsyncApp)".

Il test non è ancora completo perché non riesco ad andare oltre il messaggio di mapStateToProps errore.

AsyncApp-test.js

jest.dontMock('../../containers/AsyncApp'); 
jest.dontMock('redux'); 
jest.dontMock('react-redux'); 
jest.dontMock('redux-thunk'); 
jest.dontMock('../../configureStore'); 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import TestUtils from 'react-addons-test-utils'; 
const configureStore = require('../../configureStore'); 
const AsyncApp = require('../../containers/AsyncApp'); 

const store = configureStore(); 

//const asyncApp = TestUtils.renderIntoDocument(
    //<AsyncApp store={store} /> 
//); 

const shallowRenderer = TestUtils.createRenderer(); 
shallowRenderer.render(<AsyncApp store={store}/>); 

Voglio testare infine che AsyncApp contiene un FooComponent, e che un'azione foo viene inviato quando onFoo si chiama.

È quello che sto cercando di fare realizzabile? Sto andando su questo nel modo giusto?

Answer 1

Il suggerimento che ho visto in alcuni punti è quello di testare il componente non connesso, al contrario della versione connessa. Quindi, verifica che quando passi puntelli specifici al tuo componente ottieni l'output di rendering previsto e verifica che quando passi in uno stato con una certa forma il tuo mapStateToProps() restituisca i pezzi attesi. Quindi ci si può aspettare che entrambi funzionino correttamente quando messi insieme.