React-Redux Контейнер TestUnit

Question

Я новичок в React с Redux и пытаюсь создать TestUnit для контейнера, который подключается к диалоговому окну, отображающему таблицу.

В контейнере, который у меня есть:

• константа mapStateToProps, которая возвращает свойства для диалога с табличкой.
• константа mapDispatchToProps, которая отображает функцию на действие
• функция соединения, которая связывает 2 реквизита сверху с Диалог.

Контейнер:

 import { ApplicationState } from '../ApplicationState';
 import { connect } from 'react-redux';
 import TabelDialog, { TabelDialogProps } from '../components/dialogs/TabelDialog';
 import { acceptDisplay } from '../actions/displayActions';

 const mapStateToProps=(
    state: ApplicationState,
    { open, onClose }: TabelDialogProps)
    => {
     return {
       open,
       onClose,
       tableData: [
         {
            manufacturer: 'Samsung',
            displayType: 'OLED',
         },
         {
            manufacturer: 'LG',
            displayType: 'OLED',
         }
       ]
    }         
 };

 const mapDispatchToProps = {
    onAccept: acceptDisplay
 };

 export default connect(mapStateToProps, mapDispatchToProps)(TabelDialog);

Тест не завершен и требует корректировки:

const createMockStore = () => {
    const store = {
      getState: jest.fn(() => ({})),
      dispatch: jest.fn(),
      data: jest.fn()
   }

 const next = jest.fn()
 const invoke = action => thunk(store)(next)(action)

 return {store, next, invoke }


}

describe('Container test', () => {
     it('should dispatch open', () => {
       const store = createMockStore();
       const wrapper = shallow(
             <TabelDialog 
                 open = {true}
                 data = {undefined}
                 onClose = {undefined}
                 onAccept = {undefined}
            />
        );

      expect(store).toHaveBeenCalled():
  });
})

Я хотел бы открыть диппатч, onClose и данные. Я на правильном пути?

Энди

Answer 1

Не уверен, что это будет решением вашей проблемы, но, возможно, даст вам некоторый прогресс. Похоже, вы также должны предоставить магазин для компонента.

const store = {...}

const wrapper = shallow(<TabelDialog store={store}  ... />);