[Fabric] Add Snapshot Testing for RNTester Sample Pages

packages/e2e-test-app-fabric/babel.config.js

@@ -1,3 +1,6 @@
 module.exports = {
   extends: "@rnw-scripts/babel-react-native-config",
+  plugins: [
+    "@react-native/babel-plugin-codegen"
+    ]
 };

packages/e2e-test-app-fabric/jest.config.js

@@ -23,10 +23,13 @@ module.exports = {
   roots: ['<rootDir>/test/'],
 
   // The test environment that will be used for testing
-  testEnvironment: '@react-native-windows/automation',
+  // This environment causes the app to launch and close after testing is complete.
+  // Temporarily disabling due to breaks in UIA implementation.
+  // disabled temporarily
+  // testEnvironment: '@react-native-windows/automation',
 
   // The pattern or patterns Jest uses to detect test files
-  testRegex: '.*\\.test\\.ts$',
+  testRegex: ['.*\\.test\\.ts$', '.*\\.test\\.js$'],
 
   // Default timeout of a test in milliseconds
   testTimeout: 70000,
@@ -40,11 +43,11 @@ module.exports = {
     '^.+\\.[jt]sx?$': defaultTransform,
   },
 
-  snapshotResolver: 'react-native-windows/jest-snapshot-resolver.js',
+  //snapshotResolver: 'react-native-windows/jest-snapshot-resolver.js',
 
   // An array of regexp pattern strings that are matched against all source file paths before transformation.
   // If the file path matches any of the patterns, it will not be transformed.
-  transformIgnorePatterns: ['jest-runner'],
+  transformIgnorePatterns: ['jest-runner', 'node_modules\\\\safe-buffer'],
 
   // Specifies the maximum number of workers the worker-pool will spawn for running tests.
   maxWorkers: 1,
@@ -57,7 +60,23 @@ module.exports = {
   setupFilesAfterEnv: ['react-native-windows/jest/setup', './jest.setup.js'],
 
   testEnvironmentOptions: {
-    app: 'RNTesterApp',
+    app: `windows\\Debug\\RNTesterApp-Fabric.exe`,
     enableAutomationChannel: true,
+    winAppDriverBin: 'D:\\WindowsApplicationDriver\\WinAppDriver.exe',
   },
+
+  moduleFileExtensions: [
+    'js',
+    'windows.js',
+    'android.js',
+    'mjs',
+    'cjs',
+    'jsx',
+    'ts',
+    'windows.ts',
+    'tsx',
+    'windows.tsx',
+    'json',
+    'node',
+  ],
 };

packages/e2e-test-app-fabric/jest.setup.js

@@ -9,9 +9,13 @@
 const fs = require('fs');
 const path = require('path');
 const sanitizeFilename = require('sanitize-filename');
-const {LogBox} = require('react-native');
+// disabled temporarily
+//const {LogBox} = require('react-native');
 
 const screenshotDir = './errorShots';
 fs.mkdirSync(screenshotDir, {recursive: true});
 
-LogBox.ignoreAllLogs(true);
+process.env.NODE_ENV = 'test';
+
+// disabled temporarily
+//LogBox.ignoreAllLogs(true);

packages/e2e-test-app-fabric/metro.config.js

@@ -12,12 +12,10 @@ const path = require('path');
 const rnwPath = fs.realpathSync(
   path.dirname(require.resolve('react-native-windows/package.json')),
 );
-console.log(rnwPath);
 
 const rnwTesterPath = fs.realpathSync(
   path.dirname(require.resolve('@react-native-windows/tester/package.json')),
 );
-console.log(rnwTesterPath);
 
 const devPackages = {
   'react-native': path.normalize(rnwPath),

packages/e2e-test-app-fabric/package.json

@@ -8,7 +8,7 @@
     "lint:fix": "rnw-scripts lint:fix",
     "watch": "rnw-scripts watch",
     "windows": "react-native run-windows",
-    "e2etest": "jest",
+    "e2etest": "react-native rnx-test --platform windows",
     "e2etest:updateSnapshots": "jest -u",
     "e2etest:debug": "jest --config ./jest.debug.config.js"
   },
@@ -29,13 +29,15 @@
     "@babel/runtime": "^7.8.4",
     "@react-native-windows/automation": "^0.3.106",
     "@react-native-windows/automation-commands": "^0.1.126",
+    "@react-native/babel-plugin-codegen": "0.73.0",
     "@rnw-scripts/babel-node-config": "2.3.1",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.2",
     "@rnw-scripts/just-task": "2.3.14",
     "@rnw-scripts/metro-dev-config": "0.0.0",
     "@rnw-scripts/ts-config": "2.0.5",
-    "@rnx-kit/jest-preset": "^0.1.0",
+    "@rnx-kit/cli": "^0.16.9",
+    "@rnx-kit/jest-preset": "^0.1.14",
     "@types/jest": "^29.2.2",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.18",

packages/e2e-test-app-fabric/test/Helpers.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {AutomationClient} from '@react-native-windows/automation-channel';
+
+declare global {
+  const automationClient: AutomationClient | undefined;
+}
+
+type ErrorsResult = {
+  errors: string[];
+};
+
+export async function verifyNoErrorLogs(
+  errorFilter?: (errors: string[]) => string[],
+): Promise<void> {
+  if (!automationClient) {
+    throw new Error('RPC client is not enabled');
+  }
+
+  const response = await automationClient.invoke('ListErrors', {});
+
+  if (response.type === 'error') {
+    throw new Error(response.message);
+  }
+
+  const result = response.result as ErrorsResult;
+
+  const errors = errorFilter ? errorFilter(result.errors) : result.errors;
+  expect(errors.join('\n')).toBeFalsy();
+}

packages/e2e-test-app-fabric/test/RNTesterNavigation.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ *
+ * @format
+ */
+
+import {app} from '@react-native-windows/automation';
+
+/**
+ * Visit an example on the RNTester Components tab
+ */
+export async function goToComponentExample(example: string) {
+  //const componentsTabButton = await app.findElementByTestID('components-tab');
+  //await componentsTabButton.click();
+  await goToExample(example);
+}
+
+/**
+ * Visit an example on the RNTester APIs tab
+ */
+export async function goToApiExample(example: string) {
+  const componentsTabButton = await app.findElementByTestID('apis-tab');
+  await componentsTabButton.click();
+  await goToExample(example);
+}
+
+async function goToExample(example: string) {
+  // Filter the list down to the one test, to improve the stability of selectors
+  const searchBox = await app.findElementByTestID('explorer_search');
+  await searchBox.setValue(regexEscape(example));
+
+  const exampleButton = await app.findElementByTestID(example);
+  await exampleButton.click();
+
+  // Make sure we've launched the example by waiting until the search box is
+  // no longer present, but make sure we haven't crashed by checking that nav
+  // buttons are still visible
+  await app.waitUntil(async () => !(await exampleButton.isDisplayed()));
+  const componentsTab = await app.findElementByTestID('components-tab');
+  expect(await componentsTab.isDisplayed()).toBe(true);
+}
+
+function regexEscape(str: string): string {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}