Jak mogę napisać test jednostkowy dla komponentu reagującego, który wywołuje metodę mapStateToProps reduxjs?

Question

Próbuję napisać testy jednostkowe dla komponentu kontenera o nazwie AsyncApp, ale pojawia się następujący komunikat o błędzie "mapStateToProps musi zwrócić obiekt. Zamiast tego otrzymał niezdefiniowany."

To jest moje ustawienie.

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); 

olewam store bezpośrednio do AsyncApp w moim teście, aby uniknąć następujące Runtime Error: 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)".

Test jeszcze nie jest zakończona, bo nie można ominąć wiadomości mapStateToProps błędu.

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}/>); 

chcę ostatecznie przetestować że AsyncApp zawiera FooComponent i że foo działanie jest wywoływane, gdy onFoo nazywa.

Czy to, co próbuję osiągnąć, jest możliwe do osiągnięcia? Czy podążam tą drogą we właściwy sposób?

Answer 1

Sugestia, którą widziałem w kilku miejscach, polega na przetestowaniu niepodłączonego komponentu, w przeciwieństwie do podłączonej wersji. Dlatego sprawdź, czy po przekazaniu konkretnych rekwizytów do komponentu otrzymasz oczekiwane renderowanie i sprawdzenie, czy po przejściu w stan o określonym kształcie Twój mapStateToProps() zwraca oczekiwane kawałki. Wtedy możesz oczekiwać, że oba powinny działać poprawnie, gdy zostaną połączone.