Come inoltrare esplicitamente lo store come puntello a "Connect()"

Question

Sto provando a testare il mio componente React e ottenere il seguente errore.

Violazione invariante: Impossibile trovare "archivio" nel contesto o oggetti di scena di "Connect()". In alternativa, avvolgere il componente root in un provider < o passare "store" in modo esplicito a "Connect()".

L'errore si verifica durante il rendering del componente nel test.

beforeEach(() => { 
    Component = TestUtils.renderIntoDocument(<SideMenu />); 
}); 

Funziona correttamente quando si esegue il rendering del componente sulla pagina. Tuttavia, nel test, non sono in grado di passare esplicitamente lo store nel componente.

Qualcuno può indicare la direzione giusta?

Answer 1

connect è un decoratore fornito da react-redux. Un componente connect redux è un componente intelligente e si aspetta che lo store sia disponibile tramite prop o come dice il messaggio di errore tramite Provider.

Durante il test di un componente intelligente, è possibile fornire negozio fittato come prop. Tuttavia, quando c'è un altro componente figlio lungo la linea, che si aspetta il store, il modo prop non funzionerà.

Ecco un modo per fornire store a un componente che è import s un componente figlio che si abbona allo store.

const initialState = {key: 'value'}; 
const store = createStore(initialState); 

component = TestUtils.renderIntoDocument(
    <Provider store={store(initialState)}> 
    {() => <SideMenu />} 
    </Provider> 
); 

Answer 2

Nella maggior parte dei casi, ho trovato che l'importazione del componente stesso nei test funziona correttamente per me.

SideMenu.js:

export class SideMenu extends React.Component { 
// implementation 
} 

export default connect(mapStateToProps,)(SideMenu) 

SideMenu.spec.js:

import { SideMenu } from 'path/to/SideMenu.js' 

const props = { 
    // provide all necessary stubs and mocks for redux props and actions 
} 
component = TestUtils.renderIntoDocument(<SideMenu {...props} />); 

Nota: come Салман sottolineato questo approccio non funziona quando c'è un altro componente figlio su tutta la linea, chi si aspetta il store.