Jak jawnie przekazać magazyn jako podpowiedź do "Połącz()"

Question

Próbuję przetestować mój komponent React i uzyskać następujący błąd.

Niezgodne naruszenie: Nie można znaleźć "sklepu" w kontekście lub rekwizytach "Połącz()". Zapakuj element główny w dostawcę> < lub jawnie przeprowadź "składowanie" jako podprogram do "Połącz()".

Błąd pojawia się podczas renderowania komponentu w teście.

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

Działa poprawnie podczas renderowania komponentu na stronie. Jednak w teście nie jestem w stanie przekazać sklepu wprost do komponentu.

Czy ktoś może wskazać właściwy kierunek?

Answer 1

connect jest dekoratorem dostarczonym przez react-redux. Składnik redux jest komponentem inteligentnym i oczekuje, że sklep będzie dostępny przez prop lub jako komunikat o błędzie przez Provider.

Podczas testowania inteligentnego komponentu można dostarczyć fałszywy sklep jako prop. Jednak gdy w linii znajduje się inny składnik podrzędny, który oczekuje, że metoda store nie zadziała.

Oto sposób, aby dostarczyć store do składnika, który import S komponent dziecko, które subskrybuje do store.

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

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

Answer 2

W większości przypadków okazało się, że sam importowanie komponentów w testach działa dobrze.

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

Uwaga: jako Салман wskazał podejście to nie będzie działać, gdy istnieje inny składnik dziecko wzdłuż linii, kto oczekuje store.