Create a custom hook in react and write its unit test.

hook

import { useSelector, useDispatch } from 'react-redux';
import { isEmpty } from 'lodash';

import lastPropertyIdSelector from 'selectors/lastPropertyId';
import { setLastPropertyId } from 'slices/lastPropertyId';
import propertySelector from 'selectors/properties';

export default function useLastProperty() {
  const dispatch = useDispatch();
  const { properties } = useSelector(propertySelector);
  const { lastPropertyId: lastProperty } = useSelector(lastPropertyIdSelector);

  const setLastProperty = () => {
    if (!isEmpty(properties)) {
      dispatch(setLastPropertyId(properties[properties.length - 1].id));
    }
    console.log('setLastProperty -> properties', properties);
  };
  return [lastProperty, setLastProperty];
}

reducer

import { createSlice } from '@reduxjs/toolkit';

export const initialState = {};

const slice = createSlice({
  name: 'lastPropertyId',
  initialState,
  reducers: {
    store(state, action) {
      const { payload } = action;
      return payload;
    },
    setLastPropertyId(state, action) {
      const { payload } = action;
      return { ...state, lastPropertyId: payload };
      console.log("setLastPropertyId -> payload", payload)
    },

  },
});

export const { store, setLastPropertyId } = slice.actions;

export default slice.reducer;

test

import React from 'react';
import mountRender from 'tests/helpers';
import lastPropertyIdSelector from 'selectors/lastPropertyId';
import { setLastPropertyId, initialState as lastPropertyInitialState } from 'slices/lastPropertyId';
import propertySelector from 'selectors/properties';
import { initialState } from 'slices/properties';
import { useLastProperty } from 'hooks';
// import {HookTestComponent} from '../helpers';


jest.mock('selectors/lastPropertyId');
jest.mock('selectors/properties');


function Results() {
  return <div />;
}

function HookTestComponent() {
  const [lastProperty, setLastProperty] = useLastProperty();

  return (
    <Results
      lastProperty={lastProperty}
      setLastProperty={setLastProperty}
    />
  );
}

function renderHook() {
  const [component, , store] = mountRender(HookTestComponent, {
    hook: useLastProperty,
    values: [],
  });
  return [component, store];
}

describe('useLastProperty', () => {
  let store;


  describe('when properties are not set', () => {
    beforeEach(() => {
      propertySelector.mockReturnValue(initialState);
      lastPropertyIdSelector.mockReturnValue(lastPropertyInitialState);
      [, store] = renderHook();
    });

    it('does not update the store', () => {
      expect(store.dispatch).not.toHaveBeenCalled();
    });
  });

  describe('when properties are set', () => {
    let properties;
    let component;
    let parent;

    beforeEach(() => {
      properties = [{ id: '234234' }, { id: '6666' }];
      propertySelector.mockReturnValue(properties);
      lastPropertyIdSelector.mockReturnValue(lastPropertyInitialState);
      [parent, , store] = renderHook();
      component = parent.find(Results);
      component.props().setLastProperty();
      component.update();
    //   console.log("component.find(div).props()", component.find('div').props())
    });
    it('has the lastproperty Prop', () => expect(component).toHaveProp('lastProperty'));
    it('has the lastproperty setLastProperty', () => expect(component).toHaveProp('setLastProperty'));
    it('updates the store', () => {
      console.log(component.debug());
      expect(store.dispatch).toHaveBeenCalledWith(setLastPropertyId(properties[properties.length - 1].id));
    });
  });
});