Skip to content

rerender seems to update props instead of replacing them #252

Closed
@MysticEarth

Description

@MysticEarth

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();

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions