React-testing-library - 避免重新渲染子组件

Question

I am trying to migrate a test from enzyme to React Testing Library

It's goal in enzyme was "should not force re-render of child if child is unaffected"

    const wasRendered = jest.fn();

    const Component = (props) => (
        <div {...props} />
    );

    const ChildComponent = () => {
        wasRendered();
        return <div>Hello</div>;
    };

    const SkinnableParent = Skinnable(config, Component); //Skinnable is a higher order component applied from our code. 
    const SkinnableChild = Skinnable(config, ChildComponent);

    const subject = mount(
        <SkinnableParent>
            <SkinnableChild />
        </SkinnableParent>
    );

    // Sending props to force parent to re-render
    subject.setProps({className: 'foo'});
    const expected = 1;
    const actual = wasRendered.mock.calls.length;

    expect(actual).toEqual(expected);

With testing library I am trying to use the rerender functionality.

    const wasRendered = jest.fn();
    
    const Component = (props) => {
        return <div {...props} />
    };

    const ChildComponent = () => {
        wasRendered();
        return <div>Hello</div>;
    };

    const SkinnableParent = Skinnable(config, Component); //Skinnable is a higher order component applied from our code. 
    const SkinnableChild = Skinnable(config, ChildComponent);

    const RootComponent = ({className}) => {
        return (
        <SkinnableParent className={className}>
            <SkinnableChild />
        </SkinnableParent>
        )
    };

    const {rerender} = render(<RootComponent />);

    rerender(<RootComponent className='foo' />);

    const expected = 1;
    const actual = wasRendered.mock.calls.length;

    expect(actual).toEqual(expected);

The problem is that the actual result is 2 with RTL. The Child Component is being rerendered as well.

Is there a way to achieve the same result as in the previous enzyme implementation?

Answer 1

There's nothing stopping the rerender of ChildComponent in that test. Your enzyme test is not testing what you thought it was. The only way to stop the rerender from the child component in this case would be to wrap it with React.memo

When a parent component is rendered, all the child components will re-render, unless stopped by memo or a shouldComponentUpdate implementation returning false.

React has good performance because even when a component is re-render, it may not need conciliation in the DOM (which is the heavy computational burden. See https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action

You should't worry about avoiding re-renders unless the JS in the component is expensive

See this sandbox, replicating your test case, and you'll see it renders twice https://codesandbox.io/s/romantic-river-hcos6

in this case, using memo, it'll only render once https://codesandbox.io/s/condescending-lovelace-6z2j4