Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

120
Views
Test props don't get updated when calling mocked function in Enzyme

I'm making a Counter component (called 'Servings'). The servings amount and methods to increment and decrement come as props from parent components:

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

then in my test file when I invoke the onDecrement method for exmaple (which I'm mocking), the servings props doesn't get updated:

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

and indeed the test doesn't pass:

enter image description here

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!