Как передать хранилище явно в качестве опоры для «Connect()»

Question

Я пытаюсь проверить свой компонент React и получить следующую ошибку.

Инвариантное нарушение: не удалось найти «хранилище» в контексте или подпорках «Connect()». Либо оберните корневой компонент в < Provider>, либо явно передайте «store» в качестве опоры для «Connect()».

Ошибка при рендеринге компонента в тесте.

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

Он отлично работает при рендеринге Компонента на странице. Однако в тесте я не могу передать хранилище явно в Компонент.

Может ли кто-нибудь указать в правильном направлении?

Answer 1

connect является декоратором, предоставляемым react-redux. Компонент connect ed to redux является интеллектуальным компонентом и ожидает, что хранилище будет доступно либо через prop, либо, как указано в сообщении об ошибке, через Provider.

При тестировании смарт-компонента вы можете предоставить издеваемое хранилище как prop. Однако, когда есть еще один дочерний компонент, который ожидает store, способ prop не будет работать.

Вот способ подачи store к компоненту, который import является дочерним компонентом, который подписывается на store.

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

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

Answer 2

В большинстве случаев я обнаружил, что сам импортирующий компонент в тестах отлично подходит для меня.

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

Примечание: в качестве Салман отметил этот подход не будет работать, если есть еще один ребенок компонент вниз по линии, который ожидает store.