React testing component simulate click does not recognise function

Question

I have this connected component that i am trying to test, i import two actions that dispatch a call to the store. The actual button click i am trying to test it should toggle between css classes.

When i simulate the click in my test it i get a error that one of my actions triggered by the click event is not a function.

   TypeError: setLikedProducts is not a function

      13 | 
      14 |     const handleLike = () => {
    > 15 |         return like ? (setLike(false), removeLikedProduct(product)) : (setLike(true), setLikedProducts(product));
         |                                                                                       ^
      16 |     }
      17 | 
      18 |     return (

My Component:

export function LikeProduct (props) {

    const [like, setLike] = useState(false);
    const { product, setLikedProducts, removeLikedProduct } =  props;

    const handleLike = () => {
        return like ? (setLike(false), removeLikedProduct(product)) : (setLike(true), setLikedProducts(product));
    }

    return (
        <div className="LikeProduct">
            <Button 
                className={like ? "LikeProduct__like" : "LikeProduct__button"} 
                variant="link"
                onClick={handleLike}>
                <FaRegThumbsUp />
            </Button>
        </div>
    );
}


const mapDispatchToProps = () => {
    return {
        setLikedProducts,
        removeLikedProduct
    }
}

export default connect(null, mapDispatchToProps())(LikeProduct);

my Test:

const props = {
    info: {
        product: "",
        setLikedProducts: jest.fn(),
        removeLikedProduct: jest.fn()
    }
}

describe('Does LikeProduct Component Render', () => {

    let wrapper = shallow(<LikeProduct {...props}/>);

    it('LikeProduct render its css class', () => {
        expect(wrapper.find('.LikeProduct').length).toBe(1);
    }); 

    it('Trigger the button on LikeProduct', () => {
        console.log(wrapper.debug())
        wrapper.find('Button').simulate('click');
    });

Not sure why i am getting this error

Gonzalo.- · Accepted Answer · 2020-02-29 16:59:22Z

1

your props are incorrectly defined, given your props contract

it should be

const props = {
        product: "",
        setLikedProducts: jest.fn(),
        removeLikedProduct: jest.fn()
}

By the way, just in case you don't know, you can use useDispatch hook from react-redux in order to access dispatch function, instead of using connect

answered Feb 29, 2020 at 16:59

Gonzalo.-

12.7k5 gold badges53 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React testing component simulate click does not recognise function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related