Closed
Description
In a component we provide two inputs, avatar
and name
. Whenever avatar
is undefined
and a name
is given, it should render the initials instead of an image. To test this behaviour we've used rerender
:
rerender({ avatar: 'https://clipground.com/images/img_avatar-png-2.png' });
const renderedAvatar = screen.getByRole('img');
expect(renderedAvatar).toBeInTheDocument();
expect(renderedAvatar).toHaveAttribute('src', 'https://clipground.com/images/img_avatar-png-2.png');
...
rerender({ name: 'John Appleseed' });
// Initials should only exist if `avatar` is `undefined`
const renderedInitials = screen.getByText(/J/);
(renderedInitials).toBeInTheDocument();
renderedAvatar
succeeds as expected, but renderedInitials
fails since avatar
is still set – while I expected passing an object to rerender
would completely replace all props.
The test succeeds when I explicitly set avatar
:
rerender({ avatar: undefined, name: 'John Appleseed' });
// Initials should only exist if `avatar` is `undefined`
const renderedInitials = screen.getByText(/J/);
(renderedInitials).toBeInTheDocument();