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"}"
-`;