diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index 47ee3cb8f7434..8639e77f43772 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -25,14 +25,13 @@ const SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT = "sendAccessibilityEvent was called with a ref that isn't a " + 'native component. Use React.forwardRef to get access to the underlying native component'; -jest.mock('shared/ReactFeatureFlags', () => - require('shared/forks/ReactFeatureFlags.native-oss'), -); - describe('ReactFabric', () => { beforeEach(() => { jest.resetModules(); + // TODO: migrate these tests off of the legacy API + require('shared/ReactFeatureFlags').disableLegacyMode = false; + require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager'); React = require('react'); @@ -198,9 +197,9 @@ describe('ReactFabric', () => { ).toEqual({ bar: 'b', }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11 + RCTText {"foo":"a","bar":"b"} + RCTRawText {"text":"1"}`); await act(() => { ReactFabric.render( @@ -220,9 +219,9 @@ describe('ReactFabric', () => { ).toEqual({ foo: 'b', }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11 + RCTText {"foo":"b","bar":"b"} + RCTRawText {"text":"2"}`); }); it('should not clone nodes without children when updating props', async () => { @@ -443,16 +442,54 @@ describe('ReactFabric', () => { await act(() => { ReactFabric.render(, 11); }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11 + RCTView null + RCTView {"title":"a"} + RCTView {"title":"b"} + RCTView {"title":"c"} + RCTView {"title":"d"} + RCTView {"title":"e"} + RCTView {"title":"f"} + RCTView {"title":"g"} + RCTView {"title":"h"} + RCTView {"title":"i"} + RCTView {"title":"j"} + RCTView {"title":"k"} + RCTView {"title":"l"} + RCTView {"title":"m"} + RCTView {"title":"n"} + RCTView {"title":"o"} + RCTView {"title":"p"} + RCTView {"title":"q"} + RCTView {"title":"r"} + RCTView {"title":"s"} + RCTView {"title":"t"}`); await act(() => { ReactFabric.render(, 11); }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11 + RCTView null + RCTView {"title":"m"} + RCTView {"title":"x"} + RCTView {"title":"h"} + RCTView {"title":"p"} + RCTView {"title":"g"} + RCTView {"title":"w"} + RCTView {"title":"f"} + RCTView {"title":"r"} + RCTView {"title":"a"} + RCTView {"title":"l"} + RCTView {"title":"k"} + RCTView {"title":"e"} + RCTView {"title":"o"} + RCTView {"title":"i"} + RCTView {"title":"v"} + RCTView {"title":"c"} + RCTView {"title":"s"} + RCTView {"title":"t"} + RCTView {"title":"z"} + RCTView {"title":"y"}`); }); it('recreates host parents even if only children changed', async () => { @@ -490,18 +527,60 @@ describe('ReactFabric', () => { 11, ); }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe( + `11 + RCTView null + RCTView null + RCTView {"title":"a"} + RCTView {"title":"b"} + RCTView {"title":"c"} + RCTView {"title":"d"} + RCTView {"title":"e"} + RCTView {"title":"f"} + RCTView {"title":"g"} + RCTView {"title":"h"} + RCTView {"title":"i"} + RCTView {"title":"j"} + RCTView {"title":"k"} + RCTView {"title":"l"} + RCTView {"title":"m"} + RCTView {"title":"n"} + RCTView {"title":"o"} + RCTView {"title":"p"} + RCTView {"title":"q"} + RCTView {"title":"r"} + RCTView {"title":"s"} + RCTView {"title":"t"}`, + ); // Call setState() so that we skip over the top-level host node. // It should still get recreated despite a bailout. ref.current.setState({ chars: after, }); - expect( - nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(), - ).toMatchSnapshot(); + expect(nativeFabricUIManager.__dumpHierarchyForJestTestsOnly()).toBe(`11 + RCTView null + RCTView null + RCTView {"title":"m"} + RCTView {"title":"x"} + RCTView {"title":"h"} + RCTView {"title":"p"} + RCTView {"title":"g"} + RCTView {"title":"w"} + RCTView {"title":"f"} + RCTView {"title":"r"} + RCTView {"title":"a"} + RCTView {"title":"l"} + RCTView {"title":"k"} + RCTView {"title":"e"} + RCTView {"title":"o"} + RCTView {"title":"i"} + RCTView {"title":"v"} + RCTView {"title":"c"} + RCTView {"title":"s"} + RCTView {"title":"t"} + RCTView {"title":"z"} + RCTView {"title":"y"}`); }); it('calls setState with no arguments', async () => { @@ -544,7 +623,10 @@ describe('ReactFabric', () => { 22, ); }); - expect(snapshots).toMatchSnapshot(); + expect(snapshots).toEqual([ + `RCTView {"foo":"a"} + RCTView {"foo":"b"}`, + ]); }); it('should not throw when is used inside of a ancestor', async () => { diff --git a/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap b/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap deleted file mode 100644 index 90953ff2e6b31..0000000000000 --- a/packages/react-native-renderer/src/__tests__/__snapshots__/ReactFabric-test.internal.js.snap +++ /dev/null @@ -1,122 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ReactFabric recreates host parents even if only children changed 1`] = ` -"11 - RCTView null - RCTView null - RCTView {"title":"a"} - RCTView {"title":"b"} - RCTView {"title":"c"} - RCTView {"title":"d"} - RCTView {"title":"e"} - RCTView {"title":"f"} - RCTView {"title":"g"} - RCTView {"title":"h"} - RCTView {"title":"i"} - RCTView {"title":"j"} - RCTView {"title":"k"} - RCTView {"title":"l"} - RCTView {"title":"m"} - RCTView {"title":"n"} - RCTView {"title":"o"} - RCTView {"title":"p"} - RCTView {"title":"q"} - RCTView {"title":"r"} - RCTView {"title":"s"} - RCTView {"title":"t"}" -`; - -exports[`ReactFabric recreates host parents even if only children changed 2`] = ` -"11 - RCTView null - RCTView null - RCTView {"title":"m"} - RCTView {"title":"x"} - RCTView {"title":"h"} - RCTView {"title":"p"} - RCTView {"title":"g"} - RCTView {"title":"w"} - RCTView {"title":"f"} - RCTView {"title":"r"} - RCTView {"title":"a"} - RCTView {"title":"l"} - RCTView {"title":"k"} - RCTView {"title":"e"} - RCTView {"title":"o"} - RCTView {"title":"i"} - RCTView {"title":"v"} - RCTView {"title":"c"} - RCTView {"title":"s"} - RCTView {"title":"t"} - RCTView {"title":"z"} - RCTView {"title":"y"}" -`; - -exports[`ReactFabric renders and reorders children 1`] = ` -"11 - RCTView null - RCTView {"title":"a"} - RCTView {"title":"b"} - RCTView {"title":"c"} - RCTView {"title":"d"} - RCTView {"title":"e"} - RCTView {"title":"f"} - RCTView {"title":"g"} - RCTView {"title":"h"} - RCTView {"title":"i"} - RCTView {"title":"j"} - RCTView {"title":"k"} - RCTView {"title":"l"} - RCTView {"title":"m"} - RCTView {"title":"n"} - RCTView {"title":"o"} - RCTView {"title":"p"} - RCTView {"title":"q"} - RCTView {"title":"r"} - RCTView {"title":"s"} - RCTView {"title":"t"}" -`; - -exports[`ReactFabric renders and reorders children 2`] = ` -"11 - RCTView null - RCTView {"title":"m"} - RCTView {"title":"x"} - RCTView {"title":"h"} - RCTView {"title":"p"} - RCTView {"title":"g"} - RCTView {"title":"w"} - RCTView {"title":"f"} - RCTView {"title":"r"} - RCTView {"title":"a"} - RCTView {"title":"l"} - RCTView {"title":"k"} - RCTView {"title":"e"} - RCTView {"title":"o"} - RCTView {"title":"i"} - RCTView {"title":"v"} - RCTView {"title":"c"} - RCTView {"title":"s"} - RCTView {"title":"t"} - RCTView {"title":"z"} - RCTView {"title":"y"}" -`; - -exports[`ReactFabric should call complete after inserting children 1`] = ` -[ - "RCTView {"foo":"a"} - RCTView {"foo":"b"}", -] -`; - -exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 1`] = ` -"11 - RCTText {"foo":"a","bar":"b"} - RCTRawText {"text":"1"}" -`; - -exports[`ReactFabric should only pass props diffs to FabricUIManager.cloneNode 2`] = ` -"11 - RCTText {"foo":"b","bar":"b"} - RCTRawText {"text":"2"}" -`;