diff --git a/packages/react-reconciler/src/__tests__/ReactFragment-test.js b/packages/react-reconciler/src/__tests__/ReactFragment-test.js index 38e6c972f3361..10537e0d5ab3f 100644 --- a/packages/react-reconciler/src/__tests__/ReactFragment-test.js +++ b/packages/react-reconciler/src/__tests__/ReactFragment-test.js @@ -722,6 +722,149 @@ describe('ReactFragment', () => { expect(ReactNoop.getChildren()).toEqual([div(div(), span())]); }); + it('should not preserve state when switching a nested unkeyed fragment to a passthrough component', function() { + const ops = []; + + function Passthrough({children}) { + return children; + } + + class Stateful extends React.Component { + componentDidUpdate() { + ops.push('Update Stateful'); + } + + render() { + return
Hello
; + } + } + + function Foo({condition}) { + return condition ? ( + <> + <> + + + + ) : ( + <> + + + + + ); + } + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + }); + + it('should not preserve state when switching a nested keyed fragment to a passthrough component', function() { + const ops = []; + + function Passthrough({children}) { + return children; + } + + class Stateful extends React.Component { + componentDidUpdate() { + ops.push('Update Stateful'); + } + + render() { + return
Hello
; + } + } + + function Foo({condition}) { + return condition ? ( + <> + + + + + ) : ( + <> + + + + + ); + } + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + }); + + it('should not preserve state when switching a nested keyed array to a passthrough component', function() { + const ops = []; + + function Passthrough({children}) { + return children; + } + + class Stateful extends React.Component { + componentDidUpdate() { + ops.push('Update Stateful'); + } + + render() { + return
Hello
; + } + } + + function Foo({condition}) { + return condition ? ( + <>{[]} + ) : ( + <> + + + + + ); + } + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + + ReactNoop.render(); + expect(Scheduler).toFlushWithoutYielding(); + + expect(ops).toEqual([]); + expect(ReactNoop.getChildren()).toEqual([div()]); + }); + it('should preserve state when it does not change positions', function() { const ops = [];