Реактивный компонент тестирования симулирует щелчок, не распознает функцию - PullRequest
Новая
       20

Реактивный компонент тестирования симулирует щелчок, не распознает функцию

0 голосов
/ 29 февраля 2020

У меня есть этот подключенный компонент, который я пытаюсь проверить, я импортирую два действия, которые отправляют вызов в магазин. Фактическое нажатие кнопки, которую я пытаюсь проверить, должно переключаться между 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');
    });

Не уверен, почему я получаю эту ошибку

1 Ответ

1 голос
/ 29 февраля 2020

ваши реквизиты неправильно определены, учитывая ваш контракт реквизита

это должно быть 

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

Кстати, на случай, если вы не знаете, вы можете использовать useDispatch подключиться к реагирующему каналу для доступа к функции диспетчеризации, вместо использования connect

...