Wie kann ich einen Komponententest für eine reaktive Komponente schreiben, die reduxjs mapStateToProps aufruft?

Question

Ich versuche Einheitentests für eine Container-Komponente namens AsyncApp zu schreiben, aber ich bekomme den folgenden Fehler "mapStateToProps muss ein Objekt zurückgeben. Stattdessen empfangen undefined."

Das ist mein Setup.

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

Ich bin 01 vorbeidirekt an AsyncApp in meinem Test erhält die folgenden Laufzeitfehler zu vermeiden: 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)".

Der Test ist noch nicht abgeschlossen werden, da ich nicht über die mapStateToProps Fehlermeldung erhalten kann.

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

Ich möchte schließlich testen, dass AsyncApp eine FooComponent enthält, und dass eine foo Aktion ausgelöst wird, wenn onFoo genannt wird.

Ist das was ich versuche zu erreichen? Gehe ich das richtig?

Answer 1

Der Vorschlag, den ich an einigen Stellen gesehen habe, besteht darin, die nicht verbundene Komponente im Gegensatz zur verbundenen Version zu testen. Stellen Sie also sicher, dass Sie beim Übergeben bestimmter Requisiten an Ihre Komponente die erwartete gerenderte Ausgabe erhalten, und vergewissern Sie sich, dass Ihre mapStateToProps() die erwarteten Teile zurückgibt, wenn Sie einen Zustand mit einer bestimmten Form übergeben. Dann können Sie erwarten, dass beide zusammen richtig funktionieren sollten.