I am working on an app with a large vertical list of child components. Each child component is using React.memo and I've built optimizations to ensure they don't re-render when other components in the list are modified and update state higher up in the component tree.
This is working well and has dramatic performance improvements, however I want to write unit test(s) to prevent future regressions as people on the project add more functionality, props, state etc.
Ideally I would like to render the parent component and with a few of these child components, and do an action on one which should only cause the parent component and that one child component to re-render. I would then like to test that the other child component(s) do not re-render. This will be a safety test to ensure people don't make changes that break the React.memo (anonymous functions or new objects as props etc).
Here's a rough description of the hierarchy:
function Parent() {
const [state, setState] = useState({});
const items = queryItems();
return (
<div>
{items.map((item) => <Child key={item.id} item={item} setState={setState} />)}
<div>
);
}
const Child = React.memo(function({item, setState}) {
const handleClick = () => {
// Does something to update state
setState({something: 'changed'});
};
return (
<div>
{item.title}
<button onClick={handleClick} />
</div>
);
});
If someone were to come in and change the .map logic to this:
{items.map((item) => <Child key={item.id} item={item} setState={setState} otherProp={{}} />)}
That object added as otherProp would break the React.memo and cause all the children to re-render every time the parent renders. How can I write a test to ensure it will fail if someone causes a regression like this? (we have jest, react-testing-library and enzyme available)
One thing you can try is to wrap the child in a HOC with a counter prop to see if it rendered the child, however I'm not sure that would work with memo.
You can try jest's spyon mock object, https://jestjs.io/docs/jest-object, however again I'm not sure that's going to work with memo because it might trigger a rerender on the mock object when it would not have done so on the memo child.
You might have to carefully consider whether you're still doing unit testing when you move into a realm of this sort of testing. Optimization, load balancing, stress testing, how components interact with others and similar ideas fall into the realm of integration testing, as mentioned in the comment to your question. Ideally you should only be testing quantified reusable pieces of code or components and not how they interact with one another, but again that's a grey zone since the parent is related to its own children. In this case however testing whether or not it rerenders, I believe, is not applicable to unit testing.
I believe your best option is just to trust that the child will not rerender if you've passed it the same props and if the memo is applied, in which case you don't have to care about whether it's being rerendered, instead you can test if the props passed to it are still the same and through that conclude that it won't rerender. Rather test something like the props itself instead of the render.