We are now going to simulate the props of a component changing. Imagine the initial value for our Hook is a prop and it is initially 0, which then changes to 123 later on. If we reset our counter now, it should reset to 123 and not 0. However, to do so, we need to force the re-rendering of our test component after changing the value.

Let's now test resetting and forcing the component to re-render:

1. Define the test function and a variable for the initial value:

test('should reset to initial value', () => {
    let initial = 0

2. Next, we are going to render our Hook, but this time, we also pull out the rerender function via destructuring:

    const { result, rerender } = renderHook(() => useCounter(initial))

3. Now we set a new initial value and call the rerender function:

    initial = 123
    rerender()

4. Our initial value should now have changed, so when we call reset, the count will be set to 123:

    act(() => result.current.reset())
    expect(result.current.count).toBe(123)
})

As we can see, the testing library creates a dummy component, which is used for testing the Hook. We can force this dummy component to re-render in order to simulate what would happen when props change in a real component.