React 测试组件模拟点击不识别功能答案

【问题标题】：React testing component simulate click does not recognise functionReact 测试组件模拟点击不识别功能
【发布时间】：2020-02-29 16:56:44
【问题描述】：

我有一个我正在尝试测试的连接组件，我导入了两个将调用发送到商店的操作。我试图测试的实际按钮单击应该在 css 类之间切换。

当我在测试中模拟单击时，我收到一个错误，即单击事件触发的我的操作之一不是函数。

   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 (

我的组件：

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

我的测试：

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

不知道为什么会出现这个错误

【问题讨论】：

标签： reactjs enzyme

【解决方案1】：

根据您的道具合同，您的道具定义不正确

应该是

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

顺便说一句，如果你不知道，你可以使用 react-redux 中的useDispatch hook 来访问 dispatch 函数，而不是使用 connect

【讨论】：