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

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

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

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

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

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

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

Ответ 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>
);

Ответ 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.