jeudi 26 mars 2020

React-Redux Container TestUnit

I am new to React with Redux and I am trying to create a TestUnit for a container which connects to a dialog that renders a table.

In the container I have:

  • a mapStateToProps constant which returns the properties for the dialog with the tabel.
  • a mapDispatchToProps constant which maps a function to a action
  • a connect function which binds the 2 props from above to the Dialog.

The container:

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

The test is not complete and requires adjustments:

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():
  });
})

Please help me adjust the test to make it work.

Andy

Aucun commentaire:

Enregistrer un commentaire