docs: update the rerender method using the unmount method before

[MogLuiz]

The rerender method is a method that needs to be unmounted, otherwise it will take the previous rendering context, thus failing the test.
I recently ran into this problem and didn't find it in the "rerender" method section in the documentation.

[eps1lon]

The point of rerender is to just update the old UI. If you need a fresh mount, you should just use render instead. In almost all scenarios where you want to rerender, you don't want to unmount.

Could you elaborate why you need to unmount+rerender instead of just render?

[MogLuiz]

The point of rerender is to just update the old UI. If you need a fresh mount, you should just use render instead. In almost all scenarios where you want to rerender, you don't want to unmount.

Could you elaborate why you need to unmount+rerender instead of just render?

I had a problem with the following scenario: I have a component that renders some items according to the props it receives. And to test if the items are being dynamically rendered according to the props, I rendered the component passing the X props and soon after I passed my component using rerender with the Y props.
however, my rerender was loading the context of the X props. For that I needed to use the unmount() method so that the rerender loads the context of the Y props.

Here's an example:

[eps1lon]

Let's discuss this with the concrete implementation of the componen available in the original issue. Otherwise it's not clear what you're trying to do

[MogLuiz]

I had a problem with the following scenario: I have a component that renders some items according to the props it receives. And to test if the items are being dynamically rendered according to the props, I rendered the component passing the X props and soon after I passed my component using rerender with the Y props.
however, my rerender was loading the context of the X props. For that I needed to use the unmount() method so that the rerender loads the context of the Y props.

The point of rerender is to just update the old UI. If you need a fresh mount, you should just use render instead. In almost all scenarios where you want to rerender, you don't want to unmount.

Could you elaborate why you need to unmount+rerender instead of just render?

Let's discuss this with the concrete implementation of the componen available in the original issue. Otherwise it's not clear what you're trying to do

right, so let's discuss based on the following example that is presented in the documentation:

import {render} from '@testing-library/react' const {rerender} = render(<NumberDisplay number={1} />) // re-render the same component with different props rerender(<NumberDisplay number={2} />)

In the first declaration of the component we expect for test cases that the props number returns 1. So far so good. . After the rerender, we expect it to return 2, but the component will still carry the reference of the first declaration which is 1. That's why I used the unmount() method so that from the rerender declaration it returns 2.

[ph-fritsche]

Rerender with different prop value:
https://codesandbox.io/s/gifted-tdd-lbxwop?file=/src/NumberDisplay.test.js

[MogLuiz]

Rerender with different prop value: https://codesandbox.io/s/gifted-tdd-lbxwop?file=/src/NumberDisplay.test.js

Perfect! But if we don't use the "screen" it keeps pointing to the reference of the first component.
I took some time to sort this out. I think it would be nice to describe this in the documentation.

[ph-fritsche]

But if we don't use the "screen" it keeps pointing to the reference of the first component.

I don't understand what you are referring to. Could you please elaborate?
https://codesandbox.io/s/distracted-hooks-cteqy2?file=/src/NumberDisplay.test.js

[alexkrolick]

From the description of the component that inspired the issue, initialItems seems like it implies that it doesn't respond to changes in prop value, just copies them to local state. So rerender would have no effect, unless you add an effect like this to sync the values (which may be undesirable):

function List({initialItems}) { const [items, setItems] = useState(initialItems) // starting value useEffect(() => { setItems(initialItems) // update the component }, [initialItems]) return ( <ul>{items.map(item => <li>{item}</li>)}</ul> ) }

[MatanBobi]

Rerender with different prop value: https://codesandbox.io/s/gifted-tdd-lbxwop?file=/src/NumberDisplay.test.js

Perfect! But if we don't use the "screen" it keeps pointing to the reference of the first component. I took some time to sort this out. I think it would be nice to describe this in the documentation.

But it is the same DOM reference.. As long as the same element is rendered only with different attributes, React will make the changes on the actual DOM instance and not create a new one..