How do you re-render components using React Testing Library in tests?

In React Testing Library, re-rendering a component is crucial for simulating changes in props, context, or other external factors that cause a component to update. The primary method for re-rendering is through the render function's return object, specifically its rerender method.

Here's how you can re-render components effectively:

1. Initial Render:

- First, you use the render function from @testing-library/react to render your component with initial props. This gives you an object containing methods like getByRole, getByText, etc. and also includes the rerender method:

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

const initialProps = { value: 0 };
const { rerender } = render(<MyComponent {...initialProps} />);

2. Re-render with New Props:

- To re-render the component with updated props, you use the rerender method, passing in the updated props as a new element. This method triggers React's reconciliation process.

const updatedProps = { value: 1 };
rerender(<MyComponent {...updatedProps} />);

3. Example with a Simple Counter Component:

Let's look at a practical example with a simple Counter component:

// Counter.js
import React, { useState } from 'react';

const Counter = ({ initialValue }) => {
const [count, setCount] = useState(initialValue || 0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};

export default Counter;

Here's how you might test re-rendering this component:

// Counter.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('re-renders with updated props', () => {
const initialProps = { initialValue: 5 };
const { rerender } = render(<Counter {...initialProps} />);
expect(screen.getByText('Count: 5')).toBeInTheDocument();
const updatedProps = { initialValue: 10 };
rerender(<Counter {...updatedProps} />);
expect(screen.getByText('Count: 10')).toBeInTheDocument();

const incrementButton = screen.getByRole('button', { name: 'Increment' });
fireEvent.click(incrementButton);
expect(screen.getByText('Count: 11')).toBeInTheDocument();
});

- In this example, we initially render the Counter with initialValue set to 5. We then re-render it with the initialValue set to 10. The component updates its state based on new props passed, and also updates its state through an event

4. Considerations:

- Always remember that rerender is not a complete remounting of the component. It only triggers an update based on changes in the render function, which improves test speed by not recreating the component from scratch.

- Re-rendering is key for testing scenarios that react to changes in props or context.

By using the rerender function provided by React Testing Library, you can accurately simulate how your React components respond to different states and inputs during testing.

Learn more about this