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

Question

我正在嘗試將測試從酶遷移到反應測試庫

酶的目標是“如果孩子不受影響，不應該強制重新渲染孩子”

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

通過測試庫，我正在嘗試使用重新渲染功能。

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

問題是 RTL 的實際結果是 2。 子組件也正在重新渲染。

有沒有辦法達到與之前酶實施相同的結果？

Answer 1

在該測試中沒有什么可以阻止 ChildComponent 的重新呈現。 您的酶測試不是測試您認為的。 在這種情況下，停止從子組件重新渲染的唯一方法是用 React.memo 包裝它

渲染父組件時，所有子組件都將重新渲染，除非被 memo 或 shouldComponentUpdate 實現返回 false 停止。

React 具有良好的性能，因為即使重新渲染組件，它也可能不需要在 DOM 中進行調解（這是繁重的計算負擔。請參閱https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in -行動

除非組件中的 JS 很昂貴，否則您不必擔心避免重新渲染

查看這個沙箱，復制你的測試用例，你會看到它渲染了兩次https://codesandbox.io/s/romantic-river-hcos6

在這種情況下，使用備忘錄，它只會渲染一次https://codesandbox.io/s/condescending-lovelace-6z2j4