Estoy haciendo un componente de Contador (llamado 'Porciones'). La cantidad de porciones y los métodos para aumentar y disminuir vienen como accesorios de los componentes principales:

 const Servings: React.FC<ServingsProps> = ({ servings, onDecrease, onIncrease, className, }) => { return ( <div className={'servings-conuter ' + className}> <span className='servings-conuter__label'>servings</span> <button className='servings-conuter__button' onClick={onDecrease} aria-label='decrease servings' data-test='decrease-servings' > - </button> <span className='servings-conuter__count' data-test='servings-label' > {servings} </span> <button className='servings-conuter__button' onClick={onIncrease} aria-label='increase servings' data-test='increase-servings' > + </button> </div> ) }

luego, en mi archivo de prueba, cuando invoco el método onDecrement, por ejemplo (que me estoy burlando), los accesorios de las porciones no se actualizan:

 const defaultProps = { servings: 3, onDecrease: jest.fn(), onIncrease: jest.fn(), className: 'test' } const setup = (props = {}) => { const setupProps = { ...defaultProps, ...props } return mount(<Servings {...setupProps} />) } describe('Servings component', () => { it('renders with no errors', () => { const wrapper = setup() expect(wrapper.exists()).toBe(true) }) it('decrease servings correclty', () => { const wrapper = setup() wrapper .find('button[data-test=\'decrease-servings\']') .simulate('click') //wrapper.props().onDecrease() // heard this is better then simulate, cause it will be soon deprecated, is it true? //wrapper.update() // is this actually needed? doesnt seem to make a difference const servingsLabel = wrapper.find('span[data-test=\'servings-label\']').text() expect(defaultProps.onDecrease).toBeCalled(); // this passes, so the function does get called expect(servingsLabel).toBe('2') }) })

y de hecho la prueba no pasa: