From 24eb18a638a298415c0042a022e988eb42b46162 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Mon, 9 Jan 2023 17:21:51 -0800
Subject: [PATCH 01/11] Move all tests and snapshots under one folder, edit
 config

---
 packages/components/Button/jest.config.js                       | 2 --
 packages/components/Button/package.json                         | 2 +-
 .../Button.test.tsx => __tests__/ButtonLegacy.test.tsx}         | 2 +-
 .../Button/src/{Button.test.tsx => __tests__/ButtonV1.test.tsx} | 2 +-
 .../src/{CompoundButton => __tests__}/CompoundButton.test.tsx   | 2 +-
 packages/components/Button/src/{FAB => __tests__}/FAB.test.tsx  | 2 +-
 .../src/{ToggleButton => __tests__}/ToggleButton.test.tsx       | 2 +-
 .../__snapshots__/ButtonLegacy.test.tsx.snap}                   | 0
 .../__snapshots__/ButtonV1.test.tsx.snap}                       | 0
 .../__snapshots__/CompoundButton.test.tsx.snap                  | 0
 .../src/{FAB => __tests__}/__snapshots__/FAB.test.tsx.snap      | 0
 .../__snapshots__/ToggleButton.test.tsx.snap                    | 0
 packages/components/Button/src/__tests__/jest.config.js         | 2 ++
 scripts/src/tasks/jest.js                                       | 1 +
 14 files changed, 9 insertions(+), 8 deletions(-)
 delete mode 100644 packages/components/Button/jest.config.js
 rename packages/components/Button/src/{deprecated/Button.test.tsx => __tests__/ButtonLegacy.test.tsx} (82%)
 rename packages/components/Button/src/{Button.test.tsx => __tests__/ButtonV1.test.tsx} (98%)
 rename packages/components/Button/src/{CompoundButton => __tests__}/CompoundButton.test.tsx (94%)
 rename packages/components/Button/src/{FAB => __tests__}/FAB.test.tsx (98%)
 rename packages/components/Button/src/{ToggleButton => __tests__}/ToggleButton.test.tsx (94%)
 rename packages/components/Button/src/{deprecated/__snapshots__/Button.test.tsx.snap => __tests__/__snapshots__/ButtonLegacy.test.tsx.snap} (100%)
 rename packages/components/Button/src/{__snapshots__/Button.test.tsx.snap => __tests__/__snapshots__/ButtonV1.test.tsx.snap} (100%)
 rename packages/components/Button/src/{CompoundButton => __tests__}/__snapshots__/CompoundButton.test.tsx.snap (100%)
 rename packages/components/Button/src/{FAB => __tests__}/__snapshots__/FAB.test.tsx.snap (100%)
 rename packages/components/Button/src/{ToggleButton => __tests__}/__snapshots__/ToggleButton.test.tsx.snap (100%)
 create mode 100644 packages/components/Button/src/__tests__/jest.config.js

diff --git a/packages/components/Button/jest.config.js b/packages/components/Button/jest.config.js
deleted file mode 100644
index a8bf7c4f87..0000000000
--- a/packages/components/Button/jest.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('ios');
diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json
index 1d4669965a..120af1ed04 100644
--- a/packages/components/Button/package.json
+++ b/packages/components/Button/package.json
@@ -15,7 +15,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest",
+    "test": "fluentui-scripts jest -c src/__tests__/jest.config.js",
     "update-snapshots": "fluentui-scripts jest -u",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true"
diff --git a/packages/components/Button/src/deprecated/Button.test.tsx b/packages/components/Button/src/__tests__/ButtonLegacy.test.tsx
similarity index 82%
rename from packages/components/Button/src/deprecated/Button.test.tsx
rename to packages/components/Button/src/__tests__/ButtonLegacy.test.tsx
index 19dc10d239..f1281a5764 100644
--- a/packages/components/Button/src/deprecated/Button.test.tsx
+++ b/packages/components/Button/src/__tests__/ButtonLegacy.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from './Button';
+import { Button } from '../deprecated/Button';
 import * as renderer from 'react-test-renderer';
 
 it('Button default', () => {
diff --git a/packages/components/Button/src/Button.test.tsx b/packages/components/Button/src/__tests__/ButtonV1.test.tsx
similarity index 98%
rename from packages/components/Button/src/Button.test.tsx
rename to packages/components/Button/src/__tests__/ButtonV1.test.tsx
index c459ae6179..f6a1a413da 100644
--- a/packages/components/Button/src/Button.test.tsx
+++ b/packages/components/Button/src/__tests__/ButtonV1.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from './Button';
+import { Button } from '../Button';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable, Text } from 'react-native';
diff --git a/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx b/packages/components/Button/src/__tests__/CompoundButton.test.tsx
similarity index 94%
rename from packages/components/Button/src/CompoundButton/CompoundButton.test.tsx
rename to packages/components/Button/src/__tests__/CompoundButton.test.tsx
index 533b667731..4d0d21d9bc 100644
--- a/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx
+++ b/packages/components/Button/src/__tests__/CompoundButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CompoundButton } from './CompoundButton';
+import { CompoundButton } from '../CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/FAB/FAB.test.tsx b/packages/components/Button/src/__tests__/FAB.test.tsx
similarity index 98%
rename from packages/components/Button/src/FAB/FAB.test.tsx
rename to packages/components/Button/src/__tests__/FAB.test.tsx
index f4b9bb43b1..78d08ba236 100644
--- a/packages/components/Button/src/FAB/FAB.test.tsx
+++ b/packages/components/Button/src/__tests__/FAB.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FAB } from './FAB';
+import { FAB } from '../FAB/FAB';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx b/packages/components/Button/src/__tests__/ToggleButton.test.tsx
similarity index 94%
rename from packages/components/Button/src/ToggleButton/ToggleButton.test.tsx
rename to packages/components/Button/src/__tests__/ToggleButton.test.tsx
index ef3c34c83d..d9e120cc0c 100644
--- a/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx
+++ b/packages/components/Button/src/__tests__/ToggleButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToggleButton } from './ToggleButton';
+import { ToggleButton } from '../ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/deprecated/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__tests__/__snapshots__/ButtonLegacy.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/deprecated/__snapshots__/Button.test.tsx.snap
rename to packages/components/Button/src/__tests__/__snapshots__/ButtonLegacy.test.tsx.snap
diff --git a/packages/components/Button/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/__tests__/__snapshots__/ButtonV1.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__snapshots__/Button.test.tsx.snap
rename to packages/components/Button/src/__tests__/__snapshots__/ButtonV1.test.tsx.snap
diff --git a/packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/src/__tests__/__snapshots__/CompoundButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap
rename to packages/components/Button/src/__tests__/__snapshots__/CompoundButton.test.tsx.snap
diff --git a/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/__tests__/__snapshots__/FAB.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap
rename to packages/components/Button/src/__tests__/__snapshots__/FAB.test.tsx.snap
diff --git a/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/__tests__/__snapshots__/ToggleButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap
rename to packages/components/Button/src/__tests__/__snapshots__/ToggleButton.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/jest.config.js b/packages/components/Button/src/__tests__/jest.config.js
new file mode 100644
index 0000000000..a7722fee06
--- /dev/null
+++ b/packages/components/Button/src/__tests__/jest.config.js
@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('ios', { roots: ['..'], testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/scripts/src/tasks/jest.js b/scripts/src/tasks/jest.js
index 0e376a69cf..133ea452ef 100644
--- a/scripts/src/tasks/jest.js
+++ b/scripts/src/tasks/jest.js
@@ -5,6 +5,7 @@ const path = require('path');
 
 exports.jest = () =>
   jestTask({
+    ...(argv().c && { config: argv().c }),
     ...(process.env.TF_BUILD && { runInBand: true }),
     ...(argv().u || argv().updateSnapshot ? { updateSnapshot: true } : undefined),
   });

From 8903763746d013a2658231293c35fda620d08574 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Mon, 9 Jan 2023 17:24:23 -0800
Subject: [PATCH 02/11] Move all iOS tests into one folder

---
 packages/components/Button/package.json                         | 2 +-
 .../{ => iOS}/__snapshots__/ButtonLegacy.test.tsx.snap          | 0
 .../__tests__/{ => iOS}/__snapshots__/ButtonV1.test.tsx.snap    | 0
 .../{ => iOS}/__snapshots__/CompoundButton.test.tsx.snap        | 0
 .../src/__tests__/{ => iOS}/__snapshots__/FAB.test.tsx.snap     | 0
 .../{ => iOS}/__snapshots__/ToggleButton.test.tsx.snap          | 0
 packages/components/Button/src/__tests__/iOS/jest.config.js     | 2 ++
 packages/components/Button/src/__tests__/jest.config.js         | 2 --
 8 files changed, 3 insertions(+), 3 deletions(-)
 rename packages/components/Button/src/__tests__/{ => iOS}/__snapshots__/ButtonLegacy.test.tsx.snap (100%)
 rename packages/components/Button/src/__tests__/{ => iOS}/__snapshots__/ButtonV1.test.tsx.snap (100%)
 rename packages/components/Button/src/__tests__/{ => iOS}/__snapshots__/CompoundButton.test.tsx.snap (100%)
 rename packages/components/Button/src/__tests__/{ => iOS}/__snapshots__/FAB.test.tsx.snap (100%)
 rename packages/components/Button/src/__tests__/{ => iOS}/__snapshots__/ToggleButton.test.tsx.snap (100%)
 create mode 100644 packages/components/Button/src/__tests__/iOS/jest.config.js
 delete mode 100644 packages/components/Button/src/__tests__/jest.config.js

diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json
index 120af1ed04..9ea454a4a6 100644
--- a/packages/components/Button/package.json
+++ b/packages/components/Button/package.json
@@ -15,7 +15,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest -c src/__tests__/jest.config.js",
+    "test": "fluentui-scripts jest -c src/__tests__/iOS/jest.config.js",
     "update-snapshots": "fluentui-scripts jest -u",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true"
diff --git a/packages/components/Button/src/__tests__/__snapshots__/ButtonLegacy.test.tsx.snap b/packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/__snapshots__/ButtonLegacy.test.tsx.snap
rename to packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/__snapshots__/ButtonV1.test.tsx.snap b/packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/__snapshots__/ButtonV1.test.tsx.snap
rename to packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/src/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/__snapshots__/CompoundButton.test.tsx.snap
rename to packages/components/Button/src/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/__snapshots__/FAB.test.tsx.snap
rename to packages/components/Button/src/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/__snapshots__/ToggleButton.test.tsx.snap
rename to packages/components/Button/src/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/iOS/jest.config.js b/packages/components/Button/src/__tests__/iOS/jest.config.js
new file mode 100644
index 0000000000..f56a566a41
--- /dev/null
+++ b/packages/components/Button/src/__tests__/iOS/jest.config.js
@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('ios', { roots: ['../..'], testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/src/__tests__/jest.config.js b/packages/components/Button/src/__tests__/jest.config.js
deleted file mode 100644
index a7722fee06..0000000000
--- a/packages/components/Button/src/__tests__/jest.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('ios', { roots: ['..'], testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$' });

From b250ffd9395f3310243cb9785d634d1c74ed3573 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Mon, 9 Jan 2023 17:50:43 -0800
Subject: [PATCH 03/11] Move files out of src, add win32 test files

---
 .../iOS}/ButtonLegacy.test.tsx                |  2 +-
 .../iOS}/ButtonV1.test.tsx                    |  2 +-
 .../iOS}/CompoundButton.test.tsx              |  2 +-
 .../__tests__ => __tests__/iOS}/FAB.test.tsx  |  2 +-
 .../iOS}/ToggleButton.test.tsx                |  2 +-
 .../__snapshots__/ButtonLegacy.test.tsx.snap  |  0
 .../iOS/__snapshots__/ButtonV1.test.tsx.snap  |  0
 .../CompoundButton.test.tsx.snap              |  0
 .../iOS/__snapshots__/FAB.test.tsx.snap       |  0
 .../__snapshots__/ToggleButton.test.tsx.snap  |  0
 .../Button/__tests__/iOS/jest.config.js       |  2 +
 .../__tests__/win32/ButtonLegacy.test.tsx     |  8 ++
 .../Button/__tests__/win32/ButtonV1.test.tsx  | 84 +++++++++++++++++++
 .../__tests__/win32/CompoundButton.test.tsx   | 27 ++++++
 .../Button/__tests__/win32/FAB.test.tsx       | 65 ++++++++++++++
 .../__tests__/win32/ToggleButton.test.tsx     | 27 ++++++
 .../Button/__tests__/win32/jest.config.js     |  2 +
 packages/components/Button/package.json       |  4 +-
 .../Button/src/__tests__/iOS/jest.config.js   |  2 -
 packages/components/Button/tsconfig.json      |  2 +-
 20 files changed, 224 insertions(+), 9 deletions(-)
 rename packages/components/Button/{src/__tests__ => __tests__/iOS}/ButtonLegacy.test.tsx (80%)
 rename packages/components/Button/{src/__tests__ => __tests__/iOS}/ButtonV1.test.tsx (98%)
 rename packages/components/Button/{src/__tests__ => __tests__/iOS}/CompoundButton.test.tsx (93%)
 rename packages/components/Button/{src/__tests__ => __tests__/iOS}/FAB.test.tsx (97%)
 rename packages/components/Button/{src/__tests__ => __tests__/iOS}/ToggleButton.test.tsx (93%)
 rename packages/components/Button/{src => }/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap (100%)
 rename packages/components/Button/{src => }/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap (100%)
 rename packages/components/Button/{src => }/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap (100%)
 rename packages/components/Button/{src => }/__tests__/iOS/__snapshots__/FAB.test.tsx.snap (100%)
 rename packages/components/Button/{src => }/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap (100%)
 create mode 100644 packages/components/Button/__tests__/iOS/jest.config.js
 create mode 100644 packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
 create mode 100644 packages/components/Button/__tests__/win32/ButtonV1.test.tsx
 create mode 100644 packages/components/Button/__tests__/win32/CompoundButton.test.tsx
 create mode 100644 packages/components/Button/__tests__/win32/FAB.test.tsx
 create mode 100644 packages/components/Button/__tests__/win32/ToggleButton.test.tsx
 create mode 100644 packages/components/Button/__tests__/win32/jest.config.js
 delete mode 100644 packages/components/Button/src/__tests__/iOS/jest.config.js

diff --git a/packages/components/Button/src/__tests__/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx
similarity index 80%
rename from packages/components/Button/src/__tests__/ButtonLegacy.test.tsx
rename to packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx
index f1281a5764..a6222a70f7 100644
--- a/packages/components/Button/src/__tests__/ButtonLegacy.test.tsx
+++ b/packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../deprecated/Button';
+import { Button } from '../../src/deprecated/Button';
 import * as renderer from 'react-test-renderer';
 
 it('Button default', () => {
diff --git a/packages/components/Button/src/__tests__/ButtonV1.test.tsx b/packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
similarity index 98%
rename from packages/components/Button/src/__tests__/ButtonV1.test.tsx
rename to packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
index f6a1a413da..d134cb7b9c 100644
--- a/packages/components/Button/src/__tests__/ButtonV1.test.tsx
+++ b/packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../Button';
+import { Button } from '../../src/Button';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable, Text } from 'react-native';
diff --git a/packages/components/Button/src/__tests__/CompoundButton.test.tsx b/packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
similarity index 93%
rename from packages/components/Button/src/__tests__/CompoundButton.test.tsx
rename to packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
index 4d0d21d9bc..ec310bf5fb 100644
--- a/packages/components/Button/src/__tests__/CompoundButton.test.tsx
+++ b/packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CompoundButton } from '../CompoundButton/CompoundButton';
+import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/__tests__/FAB.test.tsx b/packages/components/Button/__tests__/iOS/FAB.test.tsx
similarity index 97%
rename from packages/components/Button/src/__tests__/FAB.test.tsx
rename to packages/components/Button/__tests__/iOS/FAB.test.tsx
index 78d08ba236..df69c6e606 100644
--- a/packages/components/Button/src/__tests__/FAB.test.tsx
+++ b/packages/components/Button/__tests__/iOS/FAB.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FAB } from '../FAB/FAB';
+import { FAB } from '../../src/FAB/FAB';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/__tests__/ToggleButton.test.tsx b/packages/components/Button/__tests__/iOS/ToggleButton.test.tsx
similarity index 93%
rename from packages/components/Button/src/__tests__/ToggleButton.test.tsx
rename to packages/components/Button/__tests__/iOS/ToggleButton.test.tsx
index d9e120cc0c..488e0e8423 100644
--- a/packages/components/Button/src/__tests__/ToggleButton.test.tsx
+++ b/packages/components/Button/__tests__/iOS/ToggleButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToggleButton } from '../ToggleButton/ToggleButton';
+import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/iOS/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
diff --git a/packages/components/Button/src/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
similarity index 100%
rename from packages/components/Button/src/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
diff --git a/packages/components/Button/__tests__/iOS/jest.config.js b/packages/components/Button/__tests__/iOS/jest.config.js
new file mode 100644
index 0000000000..80f5aa541a
--- /dev/null
+++ b/packages/components/Button/__tests__/iOS/jest.config.js
@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('ios', { roots: ['.'], testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
new file mode 100644
index 0000000000..a6222a70f7
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Button } from '../../src/deprecated/Button';
+import * as renderer from 'react-test-renderer';
+
+it('Button default', () => {
+  const tree = renderer.create(<Button content="Default Button" />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/components/Button/__tests__/win32/ButtonV1.test.tsx b/packages/components/Button/__tests__/win32/ButtonV1.test.tsx
new file mode 100644
index 0000000000..d134cb7b9c
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/ButtonV1.test.tsx
@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { Button } from '../../src/Button';
+import * as renderer from 'react-test-renderer';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import { Pressable, Text } from 'react-native';
+import { Icon } from '@fluentui-react-native/icon';
+
+describe('Button component tests', () => {
+  it('Button default', () => {
+    const tree = renderer.create(<Button>Default Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button disabled', () => {
+    const tree = renderer.create(<Button disabled>Disabled Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button primary', () => {
+    const tree = renderer.create(<Button appearance="primary">Primary Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button subtle', () => {
+    const tree = renderer.create(<Button appearance="subtle">Subtle Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button circular', () => {
+    const tree = renderer.create(<Button shape="circular">Circular Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button square', () => {
+    const tree = renderer.create(<Button shape="square">Square Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button small', () => {
+    const tree = renderer.create(<Button size="small">Small Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button large', () => {
+    const tree = renderer.create(<Button size="large">Large Button</Button>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button customized', () => {
+    const CustomButton = Button.customize({ backgroundColor: 'pink' });
+    const tree = renderer.create(<CustomButton>Custom Button</CustomButton>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button composed', () => {
+    const ComposedButton = Button.compose({
+      slots: {
+        root: Pressable,
+        icon: Icon,
+        content: Text,
+      },
+    });
+    const tree = renderer.create(<ComposedButton>Composed Button with RNText</ComposedButton>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('Button simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(() => <Button>Default button</Button>, 2);
+  });
+
+  it('Button re-renders correctly', () => {
+    checkReRender(() => <Button>Render twice</Button>, 2);
+  });
+
+  it('Button shares produced styles across multiple renders', () => {
+    const style = { backgroundColor: 'black' };
+    checkRenderConsistency(() => <Button style={style}>Shared styles</Button>, 2);
+  });
+
+  it('Button re-renders correctly with style', () => {
+    const style = { borderColor: 'blue' };
+    checkReRender(() => <Button style={style}>Shared Style Render</Button>, 2);
+  });
+});
diff --git a/packages/components/Button/__tests__/win32/CompoundButton.test.tsx b/packages/components/Button/__tests__/win32/CompoundButton.test.tsx
new file mode 100644
index 0000000000..ec310bf5fb
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/CompoundButton.test.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+it('CompoundButton default', () => {
+  const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <CompoundButton>Default button</CompoundButton>, 2);
+});
+
+it('Button re-renders correctly', () => {
+  checkReRender(() => <CompoundButton>Render twice</CompoundButton>, 2);
+});
+
+it('Button shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(() => <CompoundButton style={style}>Shared styles</CompoundButton>, 2);
+});
+
+it('Button re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(() => <CompoundButton style={style}>Shared Style Render</CompoundButton>, 2);
+});
diff --git a/packages/components/Button/__tests__/win32/FAB.test.tsx b/packages/components/Button/__tests__/win32/FAB.test.tsx
new file mode 100644
index 0000000000..df69c6e606
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/FAB.test.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { FAB } from '../../src/FAB/FAB';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+const fontBuiltInProps = {
+  fontFamily: 'Arial',
+  codepoint: 0x2663,
+  fontSize: 16,
+};
+const iconProps = { fontSource: { ...fontBuiltInProps }, color: '#fff' };
+
+beforeAll(() => {
+  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+    OS: 'ios',
+    select: () => null,
+  }));
+});
+
+it('Default FAB (iOS)', () => {
+  const tree = renderer.create(<FAB icon={iconProps}>Default FAB (iOS)</FAB>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Custom FAB with no shadow(iOS)', () => {
+  const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+  const tree = renderer.create(<CustomFABNoShadow icon={iconProps}>Custom FAB with no shadow(iOS)</CustomFABNoShadow>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <FAB icon={iconProps}>Default FAB</FAB>, 2);
+});
+
+it('FAB re-renders correctly', () => {
+  checkReRender(() => <FAB icon={iconProps}>Render twice</FAB>, 2);
+});
+
+it('FAB shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(
+    () => (
+      <FAB icon={iconProps} style={style}>
+        Shared styles
+      </FAB>
+    ),
+    2,
+  );
+});
+
+it('FAB re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(
+    () => (
+      <FAB icon={iconProps} style={style}>
+        Shared Style Render
+      </FAB>
+    ),
+    2,
+  );
+});
+
+afterAll(() => {
+  jest.unmock('react-native/Libraries/Utilities/Platform');
+});
diff --git a/packages/components/Button/__tests__/win32/ToggleButton.test.tsx b/packages/components/Button/__tests__/win32/ToggleButton.test.tsx
new file mode 100644
index 0000000000..488e0e8423
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/ToggleButton.test.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+it('ToggleButton default', () => {
+  const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('Button simple rendering does not invalidate styling', () => {
+  checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
+});
+
+it('Button re-renders correctly', () => {
+  checkReRender(() => <ToggleButton>Render twice</ToggleButton>, 2);
+});
+
+it('Button shares produced styles across multiple renders', () => {
+  const style = { backgroundColor: 'black' };
+  checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
+});
+
+it('Button re-renders correctly with style', () => {
+  const style = { borderColor: 'blue' };
+  checkReRender(() => <ToggleButton style={style}>Shared Style Render</ToggleButton>, 2);
+});
diff --git a/packages/components/Button/__tests__/win32/jest.config.js b/packages/components/Button/__tests__/win32/jest.config.js
new file mode 100644
index 0000000000..4fea61450e
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/jest.config.js
@@ -0,0 +1,2 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32', { roots: ['.'], testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json
index 9ea454a4a6..796ff65383 100644
--- a/packages/components/Button/package.json
+++ b/packages/components/Button/package.json
@@ -15,7 +15,9 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
-    "test": "fluentui-scripts jest -c src/__tests__/iOS/jest.config.js",
+    "test": "yarn test-iOS && yarn test-win32",
+    "test-iOS": "fluentui-scripts jest -c __tests__/iOS/jest.config.js",
+    "test-win32": "fluentui-scripts jest -c __tests__/win32/jest.config.js",
     "update-snapshots": "fluentui-scripts jest -u",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true"
diff --git a/packages/components/Button/src/__tests__/iOS/jest.config.js b/packages/components/Button/src/__tests__/iOS/jest.config.js
deleted file mode 100644
index f56a566a41..0000000000
--- a/packages/components/Button/src/__tests__/iOS/jest.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('ios', { roots: ['../..'], testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/tsconfig.json b/packages/components/Button/tsconfig.json
index b880046e45..a41c5ef39f 100644
--- a/packages/components/Button/tsconfig.json
+++ b/packages/components/Button/tsconfig.json
@@ -4,5 +4,5 @@
     "outDir": "lib",
     "types": ["node", "jest"]
   },
-  "include": ["src"]
+  "include": ["src", "__tests__"]
 }

From 0d347ed96313740cf47a49e385e5b55e4e931db9 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Mon, 9 Jan 2023 17:50:55 -0800
Subject: [PATCH 04/11] Add snapshots for win32

---
 .../__snapshots__/ButtonLegacy.test.tsx.snap  |  93 +++
 .../__snapshots__/ButtonV1.test.tsx.snap      | 732 ++++++++++++++++++
 .../CompoundButton.test.tsx.snap              | 102 +++
 .../win32/__snapshots__/FAB.test.tsx.snap     |   5 +
 .../__snapshots__/ToggleButton.test.tsx.snap  |  86 ++
 5 files changed, 1018 insertions(+)
 create mode 100644 packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
 create mode 100644 packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap
 create mode 100644 packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
 create mode 100644 packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
 create mode 100644 packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap

diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
new file mode 100644
index 0000000000..49c30ceb27
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button default 1`] = `
+<View
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onPress={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#f3f2f1",
+      "borderColor": "#8a8886",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "borderColor": "transparent",
+        "borderWidth": 1,
+        "display": "flex",
+        "flexGrow": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "minHeight": 24,
+          "minWidth": 32,
+          "paddingEnd": 6,
+          "paddingStart": 6,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#323130",
+            "fontFamily": "Segoe UI",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "margin": 0,
+            "marginEnd": 2,
+            "marginStart": 2,
+          }
+        }
+      >
+        Default Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap
new file mode 100644
index 0000000000..bd55c302c3
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap
@@ -0,0 +1,732 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component tests Button circular 1`] = `
+<View
+  accessibilityLabel="Circular Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  shape="circular"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 9999,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Circular Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button composed 1`] = `
+<View
+  accessibilityLabel="Composed Button with RNText"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    style={
+      Object {
+        "color": "#242424",
+        "dynamicTypeRamp": undefined,
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "letterSpacing": undefined,
+        "lineHeight": undefined,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+        "maximumFontSize": undefined,
+      }
+    }
+  >
+    Composed Button with RNText
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button customized 1`] = `
+<View
+  accessibilityLabel="Custom Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "pink",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Custom Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button default 1`] = `
+<View
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Default Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button disabled 1`] = `
+<View
+  accessibilityLabel="Disabled Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  enableFocusRing={true}
+  focusable={false}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#f0f0f0",
+      "borderColor": "#e0e0e0",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#bdbdbd",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Disabled Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button large 1`] = `
+<View
+  accessibilityLabel="Large Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  size="large"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 40,
+      "minWidth": 96,
+      "padding": 7,
+      "paddingHorizontal": 15,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 16,
+        "fontWeight": "600",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Large Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button primary 1`] = `
+<View
+  accessibilityLabel="Primary Button"
+  accessibilityRole="button"
+  accessible={true}
+  appearance="primary"
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#0078d4",
+      "borderColor": "#0078d4",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Primary Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button small 1`] = `
+<View
+  accessibilityLabel="Small Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  size="small"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Small Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button square 1`] = `
+<View
+  accessibilityLabel="Square Button"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  shape="square"
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 0,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Square Button
+  </Text>
+</View>
+`;
+
+exports[`Button component tests Button subtle 1`] = `
+<View
+  accessibilityLabel="Subtle Button"
+  accessibilityRole="button"
+  accessible={true}
+  appearance="subtle"
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "transparent",
+      "borderColor": "transparent",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Subtle Button
+  </Text>
+</View>
+`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
new file mode 100644
index 0000000000..6524fb0908
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CompoundButton default 1`] = `
+<View
+  accessibilityLabel="Default Button sublabel"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 7,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        Object {
+          "color": "#242424",
+          "fontFamily": "Segoe UI",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "margin": 0,
+          "marginBottom": 1,
+          "marginEnd": -2,
+          "marginStart": 0,
+          "marginTop": -1,
+        }
+      }
+    >
+      Default Button
+    </Text>
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        Object {
+          "color": "#424242",
+          "fontFamily": "Segoe UI",
+          "fontSize": 10,
+          "fontWeight": "600",
+          "margin": 0,
+          "marginBottom": 1,
+          "marginEnd": -2,
+          "marginStart": 0,
+          "marginTop": -1,
+        }
+      }
+    >
+      sublabel
+    </Text>
+  </View>
+</View>
+`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
new file mode 100644
index 0000000000..c133f6440d
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Custom FAB with no shadow(iOS) 1`] = `null`;
+
+exports[`Default FAB (iOS) 1`] = `null`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap
new file mode 100644
index 0000000000..6bf5897838
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap
@@ -0,0 +1,86 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ToggleButton default 1`] = `
+<View
+  accessibilityActions={
+    Array [
+      Object {
+        "name": "Toggle",
+      },
+    ]
+  }
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "checked": undefined,
+    }
+  }
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onAccessibilityAction={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Default Button
+  </Text>
+</View>
+`;

From 0d58d7e2637034d03ad5b26b116e3d7b4034f793 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Thu, 16 Feb 2023 16:21:44 -0800
Subject: [PATCH 05/11] Ignore test files in publishing

---
 packages/components/Button/.npmignore | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 packages/components/Button/.npmignore

diff --git a/packages/components/Button/.npmignore b/packages/components/Button/.npmignore
new file mode 100644
index 0000000000..8425fbf757
--- /dev/null
+++ b/packages/components/Button/.npmignore
@@ -0,0 +1,2 @@
+# Don't include test files in package
+__tests__
\ No newline at end of file

From 54c520efd16664946f5838837c27e5abc5616941 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Thu, 16 Feb 2023 16:23:23 -0800
Subject: [PATCH 06/11] Ignore test files in publishing

---
 packages/components/Button/.npmignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/Button/.npmignore b/packages/components/Button/.npmignore
index 8425fbf757..3a62fb2977 100644
--- a/packages/components/Button/.npmignore
+++ b/packages/components/Button/.npmignore
@@ -1,2 +1,2 @@
 # Don't include test files in package
-__tests__
\ No newline at end of file
+__tests__/
\ No newline at end of file

From 4133912ccbedfbc739477039f8d0a1fa2dc19c1d Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Fri, 17 Feb 2023 12:33:03 -0800
Subject: [PATCH 07/11] Move around files

---
 .../__tests__/{iOS => }/ButtonLegacy.test.tsx |  2 +-
 .../__tests__/{win32 => }/ButtonV1.test.tsx   |  2 +-
 .../{win32 => }/CompoundButton.test.tsx       |  2 +-
 .../Button/__tests__/{win32 => }/FAB.test.tsx |  2 +-
 .../__tests__/{iOS => }/ToggleButton.test.tsx |  2 +-
 .../Button/__tests__/iOS/ButtonV1.test.tsx    | 84 -------------------
 .../__tests__/iOS/CompoundButton.test.tsx     | 27 ------
 .../Button/__tests__/iOS/FAB.test.tsx         | 65 --------------
 .../Button/__tests__/iOS/jest.config.js       |  2 -
 .../Button/__tests__/iOS/snapshotResolver.js  | 11 +++
 .../Button/__tests__/jest.config.ios.js       |  6 ++
 .../Button/__tests__/jest.config.win32.js     |  6 ++
 .../__tests__/win32/ButtonLegacy.test.tsx     |  8 --
 .../__tests__/win32/ToggleButton.test.tsx     | 27 ------
 .../Button/__tests__/win32/jest.config.js     |  2 -
 .../__tests__/win32/snapshotResolver.js       | 11 +++
 packages/components/Button/package.json       |  4 +-
 17 files changed, 41 insertions(+), 222 deletions(-)
 rename packages/components/Button/__tests__/{iOS => }/ButtonLegacy.test.tsx (80%)
 rename packages/components/Button/__tests__/{win32 => }/ButtonV1.test.tsx (98%)
 rename packages/components/Button/__tests__/{win32 => }/CompoundButton.test.tsx (93%)
 rename packages/components/Button/__tests__/{win32 => }/FAB.test.tsx (97%)
 rename packages/components/Button/__tests__/{iOS => }/ToggleButton.test.tsx (93%)
 delete mode 100644 packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
 delete mode 100644 packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
 delete mode 100644 packages/components/Button/__tests__/iOS/FAB.test.tsx
 delete mode 100644 packages/components/Button/__tests__/iOS/jest.config.js
 create mode 100644 packages/components/Button/__tests__/iOS/snapshotResolver.js
 create mode 100644 packages/components/Button/__tests__/jest.config.ios.js
 create mode 100644 packages/components/Button/__tests__/jest.config.win32.js
 delete mode 100644 packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
 delete mode 100644 packages/components/Button/__tests__/win32/ToggleButton.test.tsx
 delete mode 100644 packages/components/Button/__tests__/win32/jest.config.js
 create mode 100644 packages/components/Button/__tests__/win32/snapshotResolver.js

diff --git a/packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
similarity index 80%
rename from packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx
rename to packages/components/Button/__tests__/ButtonLegacy.test.tsx
index a6222a70f7..1c5de4c2c6 100644
--- a/packages/components/Button/__tests__/iOS/ButtonLegacy.test.tsx
+++ b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../../src/deprecated/Button';
+import { Button } from '../src/deprecated/Button';
 import * as renderer from 'react-test-renderer';
 
 it('Button default', () => {
diff --git a/packages/components/Button/__tests__/win32/ButtonV1.test.tsx b/packages/components/Button/__tests__/ButtonV1.test.tsx
similarity index 98%
rename from packages/components/Button/__tests__/win32/ButtonV1.test.tsx
rename to packages/components/Button/__tests__/ButtonV1.test.tsx
index d134cb7b9c..30f225f1cf 100644
--- a/packages/components/Button/__tests__/win32/ButtonV1.test.tsx
+++ b/packages/components/Button/__tests__/ButtonV1.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../../src/Button';
+import { Button } from '../src/Button';
 import * as renderer from 'react-test-renderer';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable, Text } from 'react-native';
diff --git a/packages/components/Button/__tests__/win32/CompoundButton.test.tsx b/packages/components/Button/__tests__/CompoundButton.test.tsx
similarity index 93%
rename from packages/components/Button/__tests__/win32/CompoundButton.test.tsx
rename to packages/components/Button/__tests__/CompoundButton.test.tsx
index ec310bf5fb..e8459c82a2 100644
--- a/packages/components/Button/__tests__/win32/CompoundButton.test.tsx
+++ b/packages/components/Button/__tests__/CompoundButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
+import { CompoundButton } from '../src/CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/__tests__/win32/FAB.test.tsx b/packages/components/Button/__tests__/FAB.test.tsx
similarity index 97%
rename from packages/components/Button/__tests__/win32/FAB.test.tsx
rename to packages/components/Button/__tests__/FAB.test.tsx
index df69c6e606..6e1dce55ea 100644
--- a/packages/components/Button/__tests__/win32/FAB.test.tsx
+++ b/packages/components/Button/__tests__/FAB.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FAB } from '../../src/FAB/FAB';
+import { FAB } from '../src/FAB/FAB';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/__tests__/iOS/ToggleButton.test.tsx b/packages/components/Button/__tests__/ToggleButton.test.tsx
similarity index 93%
rename from packages/components/Button/__tests__/iOS/ToggleButton.test.tsx
rename to packages/components/Button/__tests__/ToggleButton.test.tsx
index 488e0e8423..f04cd22d38 100644
--- a/packages/components/Button/__tests__/iOS/ToggleButton.test.tsx
+++ b/packages/components/Button/__tests__/ToggleButton.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
+import { ToggleButton } from '../src/ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
 
diff --git a/packages/components/Button/__tests__/iOS/ButtonV1.test.tsx b/packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
deleted file mode 100644
index d134cb7b9c..0000000000
--- a/packages/components/Button/__tests__/iOS/ButtonV1.test.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { Button } from '../../src/Button';
-import * as renderer from 'react-test-renderer';
-import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
-import { Pressable, Text } from 'react-native';
-import { Icon } from '@fluentui-react-native/icon';
-
-describe('Button component tests', () => {
-  it('Button default', () => {
-    const tree = renderer.create(<Button>Default Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button disabled', () => {
-    const tree = renderer.create(<Button disabled>Disabled Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button primary', () => {
-    const tree = renderer.create(<Button appearance="primary">Primary Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button subtle', () => {
-    const tree = renderer.create(<Button appearance="subtle">Subtle Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button circular', () => {
-    const tree = renderer.create(<Button shape="circular">Circular Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button square', () => {
-    const tree = renderer.create(<Button shape="square">Square Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button small', () => {
-    const tree = renderer.create(<Button size="small">Small Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button large', () => {
-    const tree = renderer.create(<Button size="large">Large Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button customized', () => {
-    const CustomButton = Button.customize({ backgroundColor: 'pink' });
-    const tree = renderer.create(<CustomButton>Custom Button</CustomButton>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button composed', () => {
-    const ComposedButton = Button.compose({
-      slots: {
-        root: Pressable,
-        icon: Icon,
-        content: Text,
-      },
-    });
-    const tree = renderer.create(<ComposedButton>Composed Button with RNText</ComposedButton>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('Button simple rendering does not invalidate styling', () => {
-    checkRenderConsistency(() => <Button>Default button</Button>, 2);
-  });
-
-  it('Button re-renders correctly', () => {
-    checkReRender(() => <Button>Render twice</Button>, 2);
-  });
-
-  it('Button shares produced styles across multiple renders', () => {
-    const style = { backgroundColor: 'black' };
-    checkRenderConsistency(() => <Button style={style}>Shared styles</Button>, 2);
-  });
-
-  it('Button re-renders correctly with style', () => {
-    const style = { borderColor: 'blue' };
-    checkReRender(() => <Button style={style}>Shared Style Render</Button>, 2);
-  });
-});
diff --git a/packages/components/Button/__tests__/iOS/CompoundButton.test.tsx b/packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
deleted file mode 100644
index ec310bf5fb..0000000000
--- a/packages/components/Button/__tests__/iOS/CompoundButton.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { CompoundButton } from '../../src/CompoundButton/CompoundButton';
-import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
-import * as renderer from 'react-test-renderer';
-
-it('CompoundButton default', () => {
-  const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <CompoundButton>Default button</CompoundButton>, 2);
-});
-
-it('Button re-renders correctly', () => {
-  checkReRender(() => <CompoundButton>Render twice</CompoundButton>, 2);
-});
-
-it('Button shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(() => <CompoundButton style={style}>Shared styles</CompoundButton>, 2);
-});
-
-it('Button re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(() => <CompoundButton style={style}>Shared Style Render</CompoundButton>, 2);
-});
diff --git a/packages/components/Button/__tests__/iOS/FAB.test.tsx b/packages/components/Button/__tests__/iOS/FAB.test.tsx
deleted file mode 100644
index df69c6e606..0000000000
--- a/packages/components/Button/__tests__/iOS/FAB.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { FAB } from '../../src/FAB/FAB';
-import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
-import * as renderer from 'react-test-renderer';
-
-const fontBuiltInProps = {
-  fontFamily: 'Arial',
-  codepoint: 0x2663,
-  fontSize: 16,
-};
-const iconProps = { fontSource: { ...fontBuiltInProps }, color: '#fff' };
-
-beforeAll(() => {
-  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-    OS: 'ios',
-    select: () => null,
-  }));
-});
-
-it('Default FAB (iOS)', () => {
-  const tree = renderer.create(<FAB icon={iconProps}>Default FAB (iOS)</FAB>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-it('Custom FAB with no shadow(iOS)', () => {
-  const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
-  const tree = renderer.create(<CustomFABNoShadow icon={iconProps}>Custom FAB with no shadow(iOS)</CustomFABNoShadow>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <FAB icon={iconProps}>Default FAB</FAB>, 2);
-});
-
-it('FAB re-renders correctly', () => {
-  checkReRender(() => <FAB icon={iconProps}>Render twice</FAB>, 2);
-});
-
-it('FAB shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(
-    () => (
-      <FAB icon={iconProps} style={style}>
-        Shared styles
-      </FAB>
-    ),
-    2,
-  );
-});
-
-it('FAB re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(
-    () => (
-      <FAB icon={iconProps} style={style}>
-        Shared Style Render
-      </FAB>
-    ),
-    2,
-  );
-});
-
-afterAll(() => {
-  jest.unmock('react-native/Libraries/Utilities/Platform');
-});
diff --git a/packages/components/Button/__tests__/iOS/jest.config.js b/packages/components/Button/__tests__/iOS/jest.config.js
deleted file mode 100644
index 80f5aa541a..0000000000
--- a/packages/components/Button/__tests__/iOS/jest.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('ios', { roots: ['.'], testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/__tests__/iOS/snapshotResolver.js b/packages/components/Button/__tests__/iOS/snapshotResolver.js
new file mode 100644
index 0000000000..fca48fb150
--- /dev/null
+++ b/packages/components/Button/__tests__/iOS/snapshotResolver.js
@@ -0,0 +1,11 @@
+module.exports = {
+  // resolves from test to snapshot path
+  resolveSnapshotPath: (testPath, snapshotExtension) => testPath.replace('__tests__', '__tests__/iOS/__snapshots__') + snapshotExtension,
+
+  // resolves from snapshot to test path
+  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+    snapshotFilePath.replace('win32/__snapshots__', '').slice(0, -snapshotExtension.length),
+
+  // Example test path, used for preflight consistency check of the implementation above
+  testPathForConsistencyCheck: '../ButtonLegacy.test.tsx',
+};
diff --git a/packages/components/Button/__tests__/jest.config.ios.js b/packages/components/Button/__tests__/jest.config.ios.js
new file mode 100644
index 0000000000..c0dd4ea5dd
--- /dev/null
+++ b/packages/components/Button/__tests__/jest.config.ios.js
@@ -0,0 +1,6 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('ios', {
+  roots: ['.'],
+  snapshotResolver: './ios/snapshotResolver.js',
+  testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$',
+});
diff --git a/packages/components/Button/__tests__/jest.config.win32.js b/packages/components/Button/__tests__/jest.config.win32.js
new file mode 100644
index 0000000000..7a31359ebc
--- /dev/null
+++ b/packages/components/Button/__tests__/jest.config.win32.js
@@ -0,0 +1,6 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32', {
+  roots: ['.'],
+  snapshotResolver: './win32/snapshotResolver.js',
+  testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$',
+});
diff --git a/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
deleted file mode 100644
index a6222a70f7..0000000000
--- a/packages/components/Button/__tests__/win32/ButtonLegacy.test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Button } from '../../src/deprecated/Button';
-import * as renderer from 'react-test-renderer';
-
-it('Button default', () => {
-  const tree = renderer.create(<Button content="Default Button" />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
diff --git a/packages/components/Button/__tests__/win32/ToggleButton.test.tsx b/packages/components/Button/__tests__/win32/ToggleButton.test.tsx
deleted file mode 100644
index 488e0e8423..0000000000
--- a/packages/components/Button/__tests__/win32/ToggleButton.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { ToggleButton } from '../../src/ToggleButton/ToggleButton';
-import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
-import * as renderer from 'react-test-renderer';
-
-it('ToggleButton default', () => {
-  const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
-});
-
-it('Button re-renders correctly', () => {
-  checkReRender(() => <ToggleButton>Render twice</ToggleButton>, 2);
-});
-
-it('Button shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
-});
-
-it('Button re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(() => <ToggleButton style={style}>Shared Style Render</ToggleButton>, 2);
-});
diff --git a/packages/components/Button/__tests__/win32/jest.config.js b/packages/components/Button/__tests__/win32/jest.config.js
deleted file mode 100644
index 4fea61450e..0000000000
--- a/packages/components/Button/__tests__/win32/jest.config.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
-module.exports = configureReactNativeJest('win32', { roots: ['.'], testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$' });
diff --git a/packages/components/Button/__tests__/win32/snapshotResolver.js b/packages/components/Button/__tests__/win32/snapshotResolver.js
new file mode 100644
index 0000000000..399aee4cd3
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/snapshotResolver.js
@@ -0,0 +1,11 @@
+module.exports = {
+  // resolves from test to snapshot path
+  resolveSnapshotPath: (testPath, snapshotExtension) => testPath.replace('__tests__', '__tests__/win32/__snapshots__') + snapshotExtension,
+
+  // resolves from snapshot to test path
+  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
+    snapshotFilePath.replace('win32/__snapshots__', '').slice(0, -snapshotExtension.length),
+
+  // Example test path, used for preflight consistency check of the implementation above
+  testPathForConsistencyCheck: '../ButtonLegacy.test.tsx',
+};
diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json
index d76c0656ab..809efeb8b5 100644
--- a/packages/components/Button/package.json
+++ b/packages/components/Button/package.json
@@ -16,8 +16,8 @@
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
     "test": "yarn test-iOS && yarn test-win32",
-    "test-iOS": "fluentui-scripts jest -c __tests__/iOS/jest.config.js",
-    "test-win32": "fluentui-scripts jest -c __tests__/win32/jest.config.js",
+    "test-iOS": "fluentui-scripts jest -c __tests__/jest.config.ios.js",
+    "test-win32": "fluentui-scripts jest -c __tests__/jest.config.win32.js",
     "update-snapshots": "fluentui-scripts jest -u",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true"

From 2e44846d5e5ee103149f6bda20e8d8421c7e6fed Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Fri, 17 Feb 2023 15:32:47 -0800
Subject: [PATCH 08/11] Fix build error

---
 packages/components/Button/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/Button/tsconfig.json b/packages/components/Button/tsconfig.json
index a41c5ef39f..b880046e45 100644
--- a/packages/components/Button/tsconfig.json
+++ b/packages/components/Button/tsconfig.json
@@ -4,5 +4,5 @@
     "outDir": "lib",
     "types": ["node", "jest"]
   },
-  "include": ["src", "__tests__"]
+  "include": ["src"]
 }

From 1a8ac8e704cdece678ddee5b235427beeedf0303 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Fri, 17 Feb 2023 15:33:00 -0800
Subject: [PATCH 09/11] Fix some tests

---
 .../Button/__tests__/CompoundButton.test.tsx          |  7 +++++++
 .../components/Button/__tests__/ToggleButton.test.tsx | 11 ++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/components/Button/__tests__/CompoundButton.test.tsx b/packages/components/Button/__tests__/CompoundButton.test.tsx
index e8459c82a2..b2b22a31a4 100644
--- a/packages/components/Button/__tests__/CompoundButton.test.tsx
+++ b/packages/components/Button/__tests__/CompoundButton.test.tsx
@@ -2,6 +2,13 @@ import * as React from 'react';
 import { CompoundButton } from '../src/CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
+import { Platform } from 'react-native';
+
+if (Platform.OS === 'android' || Platform.OS === 'ios') {
+  test.only('skip on mobile', () => {
+    console.warn('skipping tests on mobile');
+  });
+}
 
 it('CompoundButton default', () => {
   const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
diff --git a/packages/components/Button/__tests__/ToggleButton.test.tsx b/packages/components/Button/__tests__/ToggleButton.test.tsx
index f04cd22d38..c209388e91 100644
--- a/packages/components/Button/__tests__/ToggleButton.test.tsx
+++ b/packages/components/Button/__tests__/ToggleButton.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ToggleButton } from '../src/ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
+import { Platform } from 'react-native';
 
 it('ToggleButton default', () => {
   const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
@@ -9,7 +10,9 @@ it('ToggleButton default', () => {
 });
 
 it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
+  if (Platform.OS !== ('win32' as any)) {
+    checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
+  }
 });
 
 it('Button re-renders correctly', () => {
@@ -17,8 +20,10 @@ it('Button re-renders correctly', () => {
 });
 
 it('Button shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
+  if (Platform.OS !== ('win32' as any)) {
+    const style = { backgroundColor: 'black' };
+    checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
+  }
 });
 
 it('Button re-renders correctly with style', () => {

From f8cff2adb88fd3e09cb175de53ca39f1ab3901d6 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Fri, 17 Feb 2023 16:02:33 -0800
Subject: [PATCH 10/11] Move around structure again...

---
 .../Button/__tests__/ButtonLegacy.test.tsx    |  10 +-
 .../Button/__tests__/ButtonV1.test.tsx        | 126 +++----
 .../Button/__tests__/CompoundButton.test.tsx  |  43 +--
 .../components/Button/__tests__/FAB.test.tsx  |  94 ++---
 .../Button/__tests__/ToggleButton.test.tsx    |  37 +-
 .../Button/__tests__/iOS/Button.test.tsx      |   9 +
 ...nV1.test.tsx.snap => Button.test.tsx.snap} | 343 ++++++++++++++++++
 .../__snapshots__/ButtonLegacy.test.tsx.snap  |  71 ----
 .../CompoundButton.test.tsx.snap              |   3 -
 .../iOS/__snapshots__/FAB.test.tsx.snap       | 204 -----------
 .../__snapshots__/ToggleButton.test.tsx.snap  |  71 ----
 .../__tests__/{ => iOS}/jest.config.ios.js    |   1 -
 .../Button/__tests__/iOS/snapshotResolver.js  |  11 -
 .../Button/__tests__/win32/Button.test.tsx    |   9 +
 ...nV1.test.tsx.snap => Button.test.tsx.snap} | 278 ++++++++++++++
 .../__snapshots__/ButtonLegacy.test.tsx.snap  |  93 -----
 .../CompoundButton.test.tsx.snap              | 102 ------
 .../win32/__snapshots__/FAB.test.tsx.snap     |   5 -
 .../__snapshots__/ToggleButton.test.tsx.snap  |  86 -----
 .../{ => win32}/jest.config.win32.js          |   1 -
 .../__tests__/win32/snapshotResolver.js       |  11 -
 packages/components/Button/package.json       |   6 +-
 22 files changed, 796 insertions(+), 818 deletions(-)
 create mode 100644 packages/components/Button/__tests__/iOS/Button.test.tsx
 rename packages/components/Button/__tests__/iOS/__snapshots__/{ButtonV1.test.tsx.snap => Button.test.tsx.snap} (62%)
 delete mode 100644 packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
 rename packages/components/Button/__tests__/{ => iOS}/jest.config.ios.js (80%)
 delete mode 100644 packages/components/Button/__tests__/iOS/snapshotResolver.js
 create mode 100644 packages/components/Button/__tests__/win32/Button.test.tsx
 rename packages/components/Button/__tests__/win32/__snapshots__/{ButtonV1.test.tsx.snap => Button.test.tsx.snap} (73%)
 delete mode 100644 packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
 delete mode 100644 packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap
 rename packages/components/Button/__tests__/{ => win32}/jest.config.win32.js (79%)
 delete mode 100644 packages/components/Button/__tests__/win32/snapshotResolver.js

diff --git a/packages/components/Button/__tests__/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
index 1c5de4c2c6..e07d8212f0 100644
--- a/packages/components/Button/__tests__/ButtonLegacy.test.tsx
+++ b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { Button } from '../src/deprecated/Button';
 import * as renderer from 'react-test-renderer';
 
-it('Button default', () => {
-  const tree = renderer.create(<Button content="Default Button" />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+export const buttonLegacyTest = () => {
+  it('Button default', () => {
+    const tree = renderer.create(<Button content="Default Button" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+};
diff --git a/packages/components/Button/__tests__/ButtonV1.test.tsx b/packages/components/Button/__tests__/ButtonV1.test.tsx
index 30f225f1cf..57bebab90f 100644
--- a/packages/components/Button/__tests__/ButtonV1.test.tsx
+++ b/packages/components/Button/__tests__/ButtonV1.test.tsx
@@ -5,80 +5,82 @@ import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/te
 import { Pressable, Text } from 'react-native';
 import { Icon } from '@fluentui-react-native/icon';
 
-describe('Button component tests', () => {
-  it('Button default', () => {
-    const tree = renderer.create(<Button>Default Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+export const buttonV1Tests = () => {
+  describe('Button component tests', () => {
+    it('Button default', () => {
+      const tree = renderer.create(<Button>Default Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button disabled', () => {
-    const tree = renderer.create(<Button disabled>Disabled Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button disabled', () => {
+      const tree = renderer.create(<Button disabled>Disabled Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button primary', () => {
-    const tree = renderer.create(<Button appearance="primary">Primary Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button primary', () => {
+      const tree = renderer.create(<Button appearance="primary">Primary Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button subtle', () => {
-    const tree = renderer.create(<Button appearance="subtle">Subtle Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button subtle', () => {
+      const tree = renderer.create(<Button appearance="subtle">Subtle Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button circular', () => {
-    const tree = renderer.create(<Button shape="circular">Circular Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button circular', () => {
+      const tree = renderer.create(<Button shape="circular">Circular Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button square', () => {
-    const tree = renderer.create(<Button shape="square">Square Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button square', () => {
+      const tree = renderer.create(<Button shape="square">Square Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button small', () => {
-    const tree = renderer.create(<Button size="small">Small Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button small', () => {
+      const tree = renderer.create(<Button size="small">Small Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button large', () => {
-    const tree = renderer.create(<Button size="large">Large Button</Button>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button large', () => {
+      const tree = renderer.create(<Button size="large">Large Button</Button>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button customized', () => {
-    const CustomButton = Button.customize({ backgroundColor: 'pink' });
-    const tree = renderer.create(<CustomButton>Custom Button</CustomButton>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
+    it('Button customized', () => {
+      const CustomButton = Button.customize({ backgroundColor: 'pink' });
+      const tree = renderer.create(<CustomButton>Custom Button</CustomButton>).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
 
-  it('Button composed', () => {
-    const ComposedButton = Button.compose({
-      slots: {
-        root: Pressable,
-        icon: Icon,
-        content: Text,
-      },
+    it('Button composed', () => {
+      const ComposedButton = Button.compose({
+        slots: {
+          root: Pressable,
+          icon: Icon,
+          content: Text,
+        },
+      });
+      const tree = renderer.create(<ComposedButton>Composed Button with RNText</ComposedButton>).toJSON();
+      expect(tree).toMatchSnapshot();
     });
-    const tree = renderer.create(<ComposedButton>Composed Button with RNText</ComposedButton>).toJSON();
-    expect(tree).toMatchSnapshot();
-  });
 
-  it('Button simple rendering does not invalidate styling', () => {
-    checkRenderConsistency(() => <Button>Default button</Button>, 2);
-  });
+    it('Button simple rendering does not invalidate styling', () => {
+      checkRenderConsistency(() => <Button>Default button</Button>, 2);
+    });
 
-  it('Button re-renders correctly', () => {
-    checkReRender(() => <Button>Render twice</Button>, 2);
-  });
+    it('Button re-renders correctly', () => {
+      checkReRender(() => <Button>Render twice</Button>, 2);
+    });
 
-  it('Button shares produced styles across multiple renders', () => {
-    const style = { backgroundColor: 'black' };
-    checkRenderConsistency(() => <Button style={style}>Shared styles</Button>, 2);
-  });
+    it('Button shares produced styles across multiple renders', () => {
+      const style = { backgroundColor: 'black' };
+      checkRenderConsistency(() => <Button style={style}>Shared styles</Button>, 2);
+    });
 
-  it('Button re-renders correctly with style', () => {
-    const style = { borderColor: 'blue' };
-    checkReRender(() => <Button style={style}>Shared Style Render</Button>, 2);
+    it('Button re-renders correctly with style', () => {
+      const style = { borderColor: 'blue' };
+      checkReRender(() => <Button style={style}>Shared Style Render</Button>, 2);
+    });
   });
-});
+};
diff --git a/packages/components/Button/__tests__/CompoundButton.test.tsx b/packages/components/Button/__tests__/CompoundButton.test.tsx
index b2b22a31a4..e4e600f99d 100644
--- a/packages/components/Button/__tests__/CompoundButton.test.tsx
+++ b/packages/components/Button/__tests__/CompoundButton.test.tsx
@@ -2,33 +2,28 @@ import * as React from 'react';
 import { CompoundButton } from '../src/CompoundButton/CompoundButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
-import { Platform } from 'react-native';
 
-if (Platform.OS === 'android' || Platform.OS === 'ios') {
-  test.only('skip on mobile', () => {
-    console.warn('skipping tests on mobile');
+export const compountButtonTests = () => {
+  it('CompoundButton default', () => {
+    const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
+    expect(tree).toMatchSnapshot();
   });
-}
 
-it('CompoundButton default', () => {
-  const tree = renderer.create(<CompoundButton secondaryContent="sublabel">Default Button</CompoundButton>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
-
-it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <CompoundButton>Default button</CompoundButton>, 2);
-});
+  it('Button simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(() => <CompoundButton>Default button</CompoundButton>, 2);
+  });
 
-it('Button re-renders correctly', () => {
-  checkReRender(() => <CompoundButton>Render twice</CompoundButton>, 2);
-});
+  it('Button re-renders correctly', () => {
+    checkReRender(() => <CompoundButton>Render twice</CompoundButton>, 2);
+  });
 
-it('Button shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(() => <CompoundButton style={style}>Shared styles</CompoundButton>, 2);
-});
+  it('Button shares produced styles across multiple renders', () => {
+    const style = { backgroundColor: 'black' };
+    checkRenderConsistency(() => <CompoundButton style={style}>Shared styles</CompoundButton>, 2);
+  });
 
-it('Button re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(() => <CompoundButton style={style}>Shared Style Render</CompoundButton>, 2);
-});
+  it('Button re-renders correctly with style', () => {
+    const style = { borderColor: 'blue' };
+    checkReRender(() => <CompoundButton style={style}>Shared Style Render</CompoundButton>, 2);
+  });
+};
diff --git a/packages/components/Button/__tests__/FAB.test.tsx b/packages/components/Button/__tests__/FAB.test.tsx
index 6e1dce55ea..9e77972174 100644
--- a/packages/components/Button/__tests__/FAB.test.tsx
+++ b/packages/components/Button/__tests__/FAB.test.tsx
@@ -10,56 +10,58 @@ const fontBuiltInProps = {
 };
 const iconProps = { fontSource: { ...fontBuiltInProps }, color: '#fff' };
 
-beforeAll(() => {
-  jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-    OS: 'ios',
-    select: () => null,
-  }));
-});
+export const fabTests = () => {
+  beforeAll(() => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'ios',
+      select: () => null,
+    }));
+  });
 
-it('Default FAB (iOS)', () => {
-  const tree = renderer.create(<FAB icon={iconProps}>Default FAB (iOS)</FAB>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+  it('Default FAB (iOS)', () => {
+    const tree = renderer.create(<FAB icon={iconProps}>Default FAB (iOS)</FAB>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('Custom FAB with no shadow(iOS)', () => {
-  const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
-  const tree = renderer.create(<CustomFABNoShadow icon={iconProps}>Custom FAB with no shadow(iOS)</CustomFABNoShadow>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+  it('Custom FAB with no shadow(iOS)', () => {
+    const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+    const tree = renderer.create(<CustomFABNoShadow icon={iconProps}>Custom FAB with no shadow(iOS)</CustomFABNoShadow>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('Button simple rendering does not invalidate styling', () => {
-  checkRenderConsistency(() => <FAB icon={iconProps}>Default FAB</FAB>, 2);
-});
+  it('Button simple rendering does not invalidate styling', () => {
+    checkRenderConsistency(() => <FAB icon={iconProps}>Default FAB</FAB>, 2);
+  });
 
-it('FAB re-renders correctly', () => {
-  checkReRender(() => <FAB icon={iconProps}>Render twice</FAB>, 2);
-});
+  it('FAB re-renders correctly', () => {
+    checkReRender(() => <FAB icon={iconProps}>Render twice</FAB>, 2);
+  });
 
-it('FAB shares produced styles across multiple renders', () => {
-  const style = { backgroundColor: 'black' };
-  checkRenderConsistency(
-    () => (
-      <FAB icon={iconProps} style={style}>
-        Shared styles
-      </FAB>
-    ),
-    2,
-  );
-});
+  it('FAB shares produced styles across multiple renders', () => {
+    const style = { backgroundColor: 'black' };
+    checkRenderConsistency(
+      () => (
+        <FAB icon={iconProps} style={style}>
+          Shared styles
+        </FAB>
+      ),
+      2,
+    );
+  });
 
-it('FAB re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(
-    () => (
-      <FAB icon={iconProps} style={style}>
-        Shared Style Render
-      </FAB>
-    ),
-    2,
-  );
-});
+  it('FAB re-renders correctly with style', () => {
+    const style = { borderColor: 'blue' };
+    checkReRender(
+      () => (
+        <FAB icon={iconProps} style={style}>
+          Shared Style Render
+        </FAB>
+      ),
+      2,
+    );
+  });
 
-afterAll(() => {
-  jest.unmock('react-native/Libraries/Utilities/Platform');
-});
+  afterAll(() => {
+    jest.unmock('react-native/Libraries/Utilities/Platform');
+  });
+};
diff --git a/packages/components/Button/__tests__/ToggleButton.test.tsx b/packages/components/Button/__tests__/ToggleButton.test.tsx
index c209388e91..8a4e86b60a 100644
--- a/packages/components/Button/__tests__/ToggleButton.test.tsx
+++ b/packages/components/Button/__tests__/ToggleButton.test.tsx
@@ -2,31 +2,28 @@ import * as React from 'react';
 import { ToggleButton } from '../src/ToggleButton/ToggleButton';
 import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import * as renderer from 'react-test-renderer';
-import { Platform } from 'react-native';
 
-it('ToggleButton default', () => {
-  const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+export const toggleButtonTests = () => {
+  it('ToggleButton default', () => {
+    const tree = renderer.create(<ToggleButton>Default Button</ToggleButton>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 
-it('Button simple rendering does not invalidate styling', () => {
-  if (Platform.OS !== ('win32' as any)) {
+  it('Button simple rendering does not invalidate styling', () => {
     checkRenderConsistency(() => <ToggleButton>Default button</ToggleButton>, 2);
-  }
-});
+  });
 
-it('Button re-renders correctly', () => {
-  checkReRender(() => <ToggleButton>Render twice</ToggleButton>, 2);
-});
+  it('Button re-renders correctly', () => {
+    checkReRender(() => <ToggleButton>Render twice</ToggleButton>, 2);
+  });
 
-it('Button shares produced styles across multiple renders', () => {
-  if (Platform.OS !== ('win32' as any)) {
+  it('Button shares produced styles across multiple renders', () => {
     const style = { backgroundColor: 'black' };
     checkRenderConsistency(() => <ToggleButton style={style}>Shared styles</ToggleButton>, 2);
-  }
-});
+  });
 
-it('Button re-renders correctly with style', () => {
-  const style = { borderColor: 'blue' };
-  checkReRender(() => <ToggleButton style={style}>Shared Style Render</ToggleButton>, 2);
-});
+  it('Button re-renders correctly with style', () => {
+    const style = { borderColor: 'blue' };
+    checkReRender(() => <ToggleButton style={style}>Shared Style Render</ToggleButton>, 2);
+  });
+};
diff --git a/packages/components/Button/__tests__/iOS/Button.test.tsx b/packages/components/Button/__tests__/iOS/Button.test.tsx
new file mode 100644
index 0000000000..d6f0d472fa
--- /dev/null
+++ b/packages/components/Button/__tests__/iOS/Button.test.tsx
@@ -0,0 +1,9 @@
+import { buttonLegacyTest } from '../ButtonLegacy.test';
+import { buttonV1Tests } from '../ButtonV1.test';
+import { fabTests } from '../FAB.test';
+import { toggleButtonTests } from '../ToggleButton.test';
+
+buttonLegacyTest();
+buttonV1Tests();
+fabTests();
+toggleButtonTests();
diff --git a/packages/components/Button/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/Button.test.tsx.snap
similarity index 62%
rename from packages/components/Button/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/Button.test.tsx.snap
index 5befa8e29b..9f46071040 100644
--- a/packages/components/Button/__tests__/iOS/__snapshots__/ButtonV1.test.tsx.snap
+++ b/packages/components/Button/__tests__/iOS/__snapshots__/Button.test.tsx.snap
@@ -581,3 +581,346 @@ exports[`Button component tests Button subtle 1`] = `
   </Text>
 </View>
 `;
+
+exports[`Button default 1`] = `
+<View
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onPress={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#f3f2f1",
+      "borderColor": "#8a8886",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "minHeight": 24,
+          "minWidth": 32,
+          "paddingEnd": 6,
+          "paddingStart": 6,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#323130",
+            "fontFamily": "System",
+            "fontSize": 13,
+            "fontWeight": "400",
+            "margin": 0,
+            "marginEnd": 2,
+            "marginStart": 2,
+          }
+        }
+      >
+        Default Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Custom FAB with no shadow(iOS) 1`] = `
+<View
+  accessibilityLabel="Custom FAB with no shadow(iOS)"
+  accessibilityRole="button"
+  accessible={true}
+  collapsable={false}
+  enableFocusRing={true}
+  focusable={true}
+  iconPosition="before"
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#0f6cbd",
+      "borderColor": "#0f548c",
+      "borderRadius": 9999,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 56,
+      "minWidth": 56,
+      "padding": 20,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    accessible={true}
+    style={
+      Object {
+        "color": "#fff",
+        "fontFamily": "Arial",
+        "fontSize": 16,
+        "fontWeight": "400",
+        "margin": 0,
+      }
+    }
+  >
+    ♣
+  </Text>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    style={
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "System",
+        "fontSize": 13,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 0,
+        "marginEnd": 0,
+        "marginStart": 8,
+        "marginTop": 0,
+      }
+    }
+  >
+    Custom FAB with no shadow(iOS)
+  </Text>
+</View>
+`;
+
+exports[`Default FAB (iOS) 1`] = `
+<View
+  style={
+    Object {
+      "alignSelf": "flex-start",
+      "backgroundColor": "#0f6cbd",
+      "borderColor": "#0f548c",
+      "borderRadius": 9999,
+      "bottom": undefined,
+      "display": "flex",
+      "end": undefined,
+      "justifyContent": "center",
+      "left": undefined,
+      "margin": undefined,
+      "marginBottom": undefined,
+      "marginEnd": undefined,
+      "marginHorizontal": undefined,
+      "marginLeft": undefined,
+      "marginRight": undefined,
+      "marginStart": undefined,
+      "marginTop": undefined,
+      "marginVertical": undefined,
+      "minHeight": 56,
+      "minWidth": 56,
+      "right": undefined,
+      "shadowColor": "#000000",
+      "shadowOffset": Object {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0.12,
+      "shadowRadius": 1,
+      "start": undefined,
+      "top": undefined,
+      "width": undefined,
+    }
+  }
+>
+  <View
+    accessibilityLabel="Default FAB (iOS)"
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    enableFocusRing={true}
+    focusable={true}
+    iconPosition="before"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "alignSelf": "flex-start",
+        "backgroundColor": "#0f6cbd",
+        "borderBottomWidth": undefined,
+        "borderColor": "#0f548c",
+        "borderEndWidth": undefined,
+        "borderLeftWidth": undefined,
+        "borderRadius": 9999,
+        "borderRightWidth": undefined,
+        "borderStartWidth": undefined,
+        "borderTopWidth": undefined,
+        "borderWidth": undefined,
+        "display": "flex",
+        "flexDirection": "row",
+        "flexWrap": undefined,
+        "justifyContent": "center",
+        "minHeight": 56,
+        "minWidth": 56,
+        "padding": 20,
+        "paddingBottom": undefined,
+        "paddingEnd": undefined,
+        "paddingHorizontal": undefined,
+        "paddingLeft": undefined,
+        "paddingRight": undefined,
+        "paddingStart": undefined,
+        "paddingTop": undefined,
+        "paddingVertical": undefined,
+        "shadowColor": "#000000",
+        "shadowOffset": Object {
+          "height": 4,
+          "width": 0,
+        },
+        "shadowOpacity": 0.14,
+        "shadowRadius": 4,
+        "width": undefined,
+      }
+    }
+  >
+    <Text
+      accessible={true}
+      style={
+        Object {
+          "color": "#fff",
+          "fontFamily": "Arial",
+          "fontSize": 16,
+          "fontWeight": "400",
+          "margin": 0,
+        }
+      }
+    >
+      ♣
+    </Text>
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      style={
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "System",
+          "fontSize": 13,
+          "fontWeight": "400",
+          "margin": 0,
+          "marginBottom": 0,
+          "marginEnd": 0,
+          "marginStart": 8,
+          "marginTop": 0,
+        }
+      }
+    >
+      Default FAB (iOS)
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`ToggleButton default 1`] = `
+<View
+  accessibilityActions={
+    Array [
+      Object {
+        "name": "Toggle",
+      },
+    ]
+  }
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "checked": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  enableFocusRing={true}
+  focusable={true}
+  onAccessibilityAction={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#0f6cbd",
+      "borderColor": "#0f548c",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minWidth": 96,
+      "padding": 8,
+      "paddingHorizontal": 15,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    style={
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "System",
+        "fontSize": 15,
+        "fontWeight": "600",
+        "margin": 0,
+        "marginBottom": 0,
+        "marginEnd": 0,
+        "marginStart": 0,
+        "marginTop": 0,
+      }
+    }
+  >
+    Default Button
+  </Text>
+</View>
+`;
diff --git a/packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
deleted file mode 100644
index 73c95c813a..0000000000
--- a/packages/components/Button/__tests__/iOS/__snapshots__/ButtonLegacy.test.tsx.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button default 1`] = `
-<View
-  accessibilityLabel="Default Button"
-  accessibilityRole="button"
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  focusable={true}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onPress={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "flex-start",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#f3f2f1",
-      "borderColor": "#8a8886",
-      "borderRadius": 4,
-      "borderWidth": 1,
-      "display": "flex",
-      "flexDirection": "row",
-    }
-  }
->
-  <View>
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "display": "flex",
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "minHeight": 24,
-          "minWidth": 32,
-          "paddingEnd": 6,
-          "paddingStart": 6,
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "#323130",
-            "fontFamily": "System",
-            "fontSize": 13,
-            "fontWeight": "400",
-            "margin": 0,
-            "marginEnd": 2,
-            "marginStart": 2,
-          }
-        }
-      >
-        Default Button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
deleted file mode 100644
index 77e82b1a02..0000000000
--- a/packages/components/Button/__tests__/iOS/__snapshots__/CompoundButton.test.tsx.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CompoundButton default 1`] = `null`;
diff --git a/packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
deleted file mode 100644
index f5820b1a58..0000000000
--- a/packages/components/Button/__tests__/iOS/__snapshots__/FAB.test.tsx.snap
+++ /dev/null
@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Custom FAB with no shadow(iOS) 1`] = `
-<View
-  accessibilityLabel="Custom FAB with no shadow(iOS)"
-  accessibilityRole="button"
-  accessible={true}
-  collapsable={false}
-  enableFocusRing={true}
-  focusable={true}
-  iconPosition="before"
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#0f6cbd",
-      "borderColor": "#0f548c",
-      "borderRadius": 9999,
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minHeight": 56,
-      "minWidth": 56,
-      "padding": 20,
-      "width": undefined,
-    }
-  }
->
-  <Text
-    accessible={true}
-    style={
-      Object {
-        "color": "#fff",
-        "fontFamily": "Arial",
-        "fontSize": 16,
-        "fontWeight": "400",
-        "margin": 0,
-      }
-    }
-  >
-    ♣
-  </Text>
-  <Text
-    ellipsizeMode="tail"
-    numberOfLines={0}
-    style={
-      Object {
-        "color": "#ffffff",
-        "fontFamily": "System",
-        "fontSize": 13,
-        "fontWeight": "400",
-        "margin": 0,
-        "marginBottom": 0,
-        "marginEnd": 0,
-        "marginStart": 8,
-        "marginTop": 0,
-      }
-    }
-  >
-    Custom FAB with no shadow(iOS)
-  </Text>
-</View>
-`;
-
-exports[`Default FAB (iOS) 1`] = `
-<View
-  style={
-    Object {
-      "alignSelf": "flex-start",
-      "backgroundColor": "#0f6cbd",
-      "borderColor": "#0f548c",
-      "borderRadius": 9999,
-      "bottom": undefined,
-      "display": "flex",
-      "end": undefined,
-      "justifyContent": "center",
-      "left": undefined,
-      "margin": undefined,
-      "marginBottom": undefined,
-      "marginEnd": undefined,
-      "marginHorizontal": undefined,
-      "marginLeft": undefined,
-      "marginRight": undefined,
-      "marginStart": undefined,
-      "marginTop": undefined,
-      "marginVertical": undefined,
-      "minHeight": 56,
-      "minWidth": 56,
-      "right": undefined,
-      "shadowColor": "#000000",
-      "shadowOffset": Object {
-        "height": 0,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 1,
-      "start": undefined,
-      "top": undefined,
-      "width": undefined,
-    }
-  }
->
-  <View
-    accessibilityLabel="Default FAB (iOS)"
-    accessibilityRole="button"
-    accessible={true}
-    collapsable={false}
-    enableFocusRing={true}
-    focusable={true}
-    iconPosition="before"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "alignItems": "center",
-        "alignSelf": "flex-start",
-        "backgroundColor": "#0f6cbd",
-        "borderBottomWidth": undefined,
-        "borderColor": "#0f548c",
-        "borderEndWidth": undefined,
-        "borderLeftWidth": undefined,
-        "borderRadius": 9999,
-        "borderRightWidth": undefined,
-        "borderStartWidth": undefined,
-        "borderTopWidth": undefined,
-        "borderWidth": undefined,
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": undefined,
-        "justifyContent": "center",
-        "minHeight": 56,
-        "minWidth": 56,
-        "padding": 20,
-        "paddingBottom": undefined,
-        "paddingEnd": undefined,
-        "paddingHorizontal": undefined,
-        "paddingLeft": undefined,
-        "paddingRight": undefined,
-        "paddingStart": undefined,
-        "paddingTop": undefined,
-        "paddingVertical": undefined,
-        "shadowColor": "#000000",
-        "shadowOffset": Object {
-          "height": 4,
-          "width": 0,
-        },
-        "shadowOpacity": 0.14,
-        "shadowRadius": 4,
-        "width": undefined,
-      }
-    }
-  >
-    <Text
-      accessible={true}
-      style={
-        Object {
-          "color": "#fff",
-          "fontFamily": "Arial",
-          "fontSize": 16,
-          "fontWeight": "400",
-          "margin": 0,
-        }
-      }
-    >
-      ♣
-    </Text>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={0}
-      style={
-        Object {
-          "color": "#ffffff",
-          "fontFamily": "System",
-          "fontSize": 13,
-          "fontWeight": "400",
-          "margin": 0,
-          "marginBottom": 0,
-          "marginEnd": 0,
-          "marginStart": 8,
-          "marginTop": 0,
-        }
-      }
-    >
-      Default FAB (iOS)
-    </Text>
-  </View>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
deleted file mode 100644
index 2ba6c42753..0000000000
--- a/packages/components/Button/__tests__/iOS/__snapshots__/ToggleButton.test.tsx.snap
+++ /dev/null
@@ -1,71 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToggleButton default 1`] = `
-<View
-  accessibilityActions={
-    Array [
-      Object {
-        "name": "Toggle",
-      },
-    ]
-  }
-  accessibilityLabel="Default Button"
-  accessibilityRole="button"
-  accessibilityState={
-    Object {
-      "checked": undefined,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  enableFocusRing={true}
-  focusable={true}
-  onAccessibilityAction={[Function]}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#0f6cbd",
-      "borderColor": "#0f548c",
-      "borderRadius": 4,
-      "borderWidth": 1,
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minWidth": 96,
-      "padding": 8,
-      "paddingHorizontal": 15,
-      "width": undefined,
-    }
-  }
->
-  <Text
-    ellipsizeMode="tail"
-    numberOfLines={0}
-    style={
-      Object {
-        "color": "#ffffff",
-        "fontFamily": "System",
-        "fontSize": 15,
-        "fontWeight": "600",
-        "margin": 0,
-        "marginBottom": 0,
-        "marginEnd": 0,
-        "marginStart": 0,
-        "marginTop": 0,
-      }
-    }
-  >
-    Default Button
-  </Text>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/jest.config.ios.js b/packages/components/Button/__tests__/iOS/jest.config.ios.js
similarity index 80%
rename from packages/components/Button/__tests__/jest.config.ios.js
rename to packages/components/Button/__tests__/iOS/jest.config.ios.js
index c0dd4ea5dd..350a36f763 100644
--- a/packages/components/Button/__tests__/jest.config.ios.js
+++ b/packages/components/Button/__tests__/iOS/jest.config.ios.js
@@ -1,6 +1,5 @@
 const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
 module.exports = configureReactNativeJest('ios', {
   roots: ['.'],
-  snapshotResolver: './ios/snapshotResolver.js',
   testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$',
 });
diff --git a/packages/components/Button/__tests__/iOS/snapshotResolver.js b/packages/components/Button/__tests__/iOS/snapshotResolver.js
deleted file mode 100644
index fca48fb150..0000000000
--- a/packages/components/Button/__tests__/iOS/snapshotResolver.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  // resolves from test to snapshot path
-  resolveSnapshotPath: (testPath, snapshotExtension) => testPath.replace('__tests__', '__tests__/iOS/__snapshots__') + snapshotExtension,
-
-  // resolves from snapshot to test path
-  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
-    snapshotFilePath.replace('win32/__snapshots__', '').slice(0, -snapshotExtension.length),
-
-  // Example test path, used for preflight consistency check of the implementation above
-  testPathForConsistencyCheck: '../ButtonLegacy.test.tsx',
-};
diff --git a/packages/components/Button/__tests__/win32/Button.test.tsx b/packages/components/Button/__tests__/win32/Button.test.tsx
new file mode 100644
index 0000000000..5b8035dabe
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/Button.test.tsx
@@ -0,0 +1,9 @@
+import { buttonLegacyTest } from '../ButtonLegacy.test';
+import { buttonV1Tests } from '../ButtonV1.test';
+import { compountButtonTests } from '../CompoundButton.test';
+import { toggleButtonTests } from '../ToggleButton.test';
+
+buttonLegacyTest();
+buttonV1Tests();
+compountButtonTests();
+toggleButtonTests();
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/Button.test.tsx.snap
similarity index 73%
rename from packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap
rename to packages/components/Button/__tests__/win32/__snapshots__/Button.test.tsx.snap
index bd55c302c3..3654879bf3 100644
--- a/packages/components/Button/__tests__/win32/__snapshots__/ButtonV1.test.tsx.snap
+++ b/packages/components/Button/__tests__/win32/__snapshots__/Button.test.tsx.snap
@@ -730,3 +730,281 @@ exports[`Button component tests Button subtle 1`] = `
   </Text>
 </View>
 `;
+
+exports[`Button default 1`] = `
+<View
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onPress={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "flex-start",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#f3f2f1",
+      "borderColor": "#8a8886",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "borderColor": "transparent",
+        "borderWidth": 1,
+        "display": "flex",
+        "flexGrow": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "alignItems": "center",
+          "alignSelf": "flex-start",
+          "display": "flex",
+          "flexDirection": "row",
+          "justifyContent": "center",
+          "minHeight": 24,
+          "minWidth": 32,
+          "paddingEnd": 6,
+          "paddingStart": 6,
+        }
+      }
+    >
+      <Text
+        style={
+          Object {
+            "color": "#323130",
+            "fontFamily": "Segoe UI",
+            "fontSize": 12,
+            "fontWeight": "400",
+            "margin": 0,
+            "marginEnd": 2,
+            "marginStart": 2,
+          }
+        }
+      >
+        Default Button
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`CompoundButton default 1`] = `
+<View
+  accessibilityLabel="Default Button sublabel"
+  accessibilityRole="button"
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 7,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+      }
+    }
+  >
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        Object {
+          "color": "#242424",
+          "fontFamily": "Segoe UI",
+          "fontSize": 12,
+          "fontWeight": "400",
+          "margin": 0,
+          "marginBottom": 1,
+          "marginEnd": -2,
+          "marginStart": 0,
+          "marginTop": -1,
+        }
+      }
+    >
+      Default Button
+    </Text>
+    <Text
+      ellipsizeMode="tail"
+      numberOfLines={0}
+      onAccessibilityTap={[Function]}
+      style={
+        Object {
+          "color": "#424242",
+          "fontFamily": "Segoe UI",
+          "fontSize": 10,
+          "fontWeight": "600",
+          "margin": 0,
+          "marginBottom": 1,
+          "marginEnd": -2,
+          "marginStart": 0,
+          "marginTop": -1,
+        }
+      }
+    >
+      sublabel
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`ToggleButton default 1`] = `
+<View
+  accessibilityActions={
+    Array [
+      Object {
+        "name": "Toggle",
+      },
+    ]
+  }
+  accessibilityLabel="Default Button"
+  accessibilityRole="button"
+  accessibilityState={
+    Object {
+      "checked": undefined,
+    }
+  }
+  accessible={true}
+  enableFocusRing={true}
+  focusable={true}
+  keyUpEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
+  onAccessibilityAction={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "alignItems": "center",
+      "alignSelf": "flex-start",
+      "backgroundColor": "#ffffff",
+      "borderColor": "#d1d1d1",
+      "borderRadius": 4,
+      "borderWidth": 1,
+      "display": "flex",
+      "flexDirection": "row",
+      "justifyContent": "center",
+      "minHeight": 32,
+      "minWidth": 64,
+      "padding": 3,
+      "paddingHorizontal": 7,
+      "width": undefined,
+    }
+  }
+>
+  <Text
+    ellipsizeMode="tail"
+    numberOfLines={0}
+    onAccessibilityTap={[Function]}
+    style={
+      Object {
+        "color": "#242424",
+        "fontFamily": "Segoe UI",
+        "fontSize": 12,
+        "fontWeight": "400",
+        "margin": 0,
+        "marginBottom": 1,
+        "marginEnd": -2,
+        "marginStart": 0,
+        "marginTop": -1,
+      }
+    }
+  >
+    Default Button
+  </Text>
+</View>
+`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
deleted file mode 100644
index 49c30ceb27..0000000000
--- a/packages/components/Button/__tests__/win32/__snapshots__/ButtonLegacy.test.tsx.snap
+++ /dev/null
@@ -1,93 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button default 1`] = `
-<View
-  accessibilityLabel="Default Button"
-  accessibilityRole="button"
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  focusable={true}
-  keyUpEvents={
-    Array [
-      Object {
-        "key": " ",
-      },
-      Object {
-        "key": "Enter",
-      },
-    ]
-  }
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyUp={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onPress={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "flex-start",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#f3f2f1",
-      "borderColor": "#8a8886",
-      "borderRadius": 4,
-      "borderWidth": 1,
-      "display": "flex",
-      "flexDirection": "row",
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "borderColor": "transparent",
-        "borderWidth": 1,
-        "display": "flex",
-        "flexGrow": 1,
-      }
-    }
-  >
-    <View
-      style={
-        Object {
-          "alignItems": "center",
-          "alignSelf": "flex-start",
-          "display": "flex",
-          "flexDirection": "row",
-          "justifyContent": "center",
-          "minHeight": 24,
-          "minWidth": 32,
-          "paddingEnd": 6,
-          "paddingStart": 6,
-        }
-      }
-    >
-      <Text
-        style={
-          Object {
-            "color": "#323130",
-            "fontFamily": "Segoe UI",
-            "fontSize": 12,
-            "fontWeight": "400",
-            "margin": 0,
-            "marginEnd": 2,
-            "marginStart": 2,
-          }
-        }
-      >
-        Default Button
-      </Text>
-    </View>
-  </View>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
deleted file mode 100644
index 6524fb0908..0000000000
--- a/packages/components/Button/__tests__/win32/__snapshots__/CompoundButton.test.tsx.snap
+++ /dev/null
@@ -1,102 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CompoundButton default 1`] = `
-<View
-  accessibilityLabel="Default Button sublabel"
-  accessibilityRole="button"
-  accessible={true}
-  enableFocusRing={true}
-  focusable={true}
-  keyUpEvents={
-    Array [
-      Object {
-        "key": " ",
-      },
-      Object {
-        "key": "Enter",
-      },
-    ]
-  }
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#ffffff",
-      "borderColor": "#d1d1d1",
-      "borderRadius": 4,
-      "borderWidth": 1,
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minHeight": 32,
-      "minWidth": 64,
-      "padding": 7,
-      "paddingHorizontal": 7,
-      "width": undefined,
-    }
-  }
->
-  <View
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "column",
-      }
-    }
-  >
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={0}
-      onAccessibilityTap={[Function]}
-      style={
-        Object {
-          "color": "#242424",
-          "fontFamily": "Segoe UI",
-          "fontSize": 12,
-          "fontWeight": "400",
-          "margin": 0,
-          "marginBottom": 1,
-          "marginEnd": -2,
-          "marginStart": 0,
-          "marginTop": -1,
-        }
-      }
-    >
-      Default Button
-    </Text>
-    <Text
-      ellipsizeMode="tail"
-      numberOfLines={0}
-      onAccessibilityTap={[Function]}
-      style={
-        Object {
-          "color": "#424242",
-          "fontFamily": "Segoe UI",
-          "fontSize": 10,
-          "fontWeight": "600",
-          "margin": 0,
-          "marginBottom": 1,
-          "marginEnd": -2,
-          "marginStart": 0,
-          "marginTop": -1,
-        }
-      }
-    >
-      sublabel
-    </Text>
-  </View>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
deleted file mode 100644
index c133f6440d..0000000000
--- a/packages/components/Button/__tests__/win32/__snapshots__/FAB.test.tsx.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Custom FAB with no shadow(iOS) 1`] = `null`;
-
-exports[`Default FAB (iOS) 1`] = `null`;
diff --git a/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap
deleted file mode 100644
index 6bf5897838..0000000000
--- a/packages/components/Button/__tests__/win32/__snapshots__/ToggleButton.test.tsx.snap
+++ /dev/null
@@ -1,86 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToggleButton default 1`] = `
-<View
-  accessibilityActions={
-    Array [
-      Object {
-        "name": "Toggle",
-      },
-    ]
-  }
-  accessibilityLabel="Default Button"
-  accessibilityRole="button"
-  accessibilityState={
-    Object {
-      "checked": undefined,
-    }
-  }
-  accessible={true}
-  enableFocusRing={true}
-  focusable={true}
-  keyUpEvents={
-    Array [
-      Object {
-        "key": " ",
-      },
-      Object {
-        "key": "Enter",
-      },
-    ]
-  }
-  onAccessibilityAction={[Function]}
-  onBlur={[Function]}
-  onClick={[Function]}
-  onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
-  onMouseEnter={[Function]}
-  onMouseLeave={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "alignItems": "center",
-      "alignSelf": "flex-start",
-      "backgroundColor": "#ffffff",
-      "borderColor": "#d1d1d1",
-      "borderRadius": 4,
-      "borderWidth": 1,
-      "display": "flex",
-      "flexDirection": "row",
-      "justifyContent": "center",
-      "minHeight": 32,
-      "minWidth": 64,
-      "padding": 3,
-      "paddingHorizontal": 7,
-      "width": undefined,
-    }
-  }
->
-  <Text
-    ellipsizeMode="tail"
-    numberOfLines={0}
-    onAccessibilityTap={[Function]}
-    style={
-      Object {
-        "color": "#242424",
-        "fontFamily": "Segoe UI",
-        "fontSize": 12,
-        "fontWeight": "400",
-        "margin": 0,
-        "marginBottom": 1,
-        "marginEnd": -2,
-        "marginStart": 0,
-        "marginTop": -1,
-      }
-    }
-  >
-    Default Button
-  </Text>
-</View>
-`;
diff --git a/packages/components/Button/__tests__/jest.config.win32.js b/packages/components/Button/__tests__/win32/jest.config.win32.js
similarity index 79%
rename from packages/components/Button/__tests__/jest.config.win32.js
rename to packages/components/Button/__tests__/win32/jest.config.win32.js
index 7a31359ebc..29326de927 100644
--- a/packages/components/Button/__tests__/jest.config.win32.js
+++ b/packages/components/Button/__tests__/win32/jest.config.win32.js
@@ -1,6 +1,5 @@
 const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
 module.exports = configureReactNativeJest('win32', {
   roots: ['.'],
-  snapshotResolver: './win32/snapshotResolver.js',
   testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$',
 });
diff --git a/packages/components/Button/__tests__/win32/snapshotResolver.js b/packages/components/Button/__tests__/win32/snapshotResolver.js
deleted file mode 100644
index 399aee4cd3..0000000000
--- a/packages/components/Button/__tests__/win32/snapshotResolver.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
-  // resolves from test to snapshot path
-  resolveSnapshotPath: (testPath, snapshotExtension) => testPath.replace('__tests__', '__tests__/win32/__snapshots__') + snapshotExtension,
-
-  // resolves from snapshot to test path
-  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
-    snapshotFilePath.replace('win32/__snapshots__', '').slice(0, -snapshotExtension.length),
-
-  // Example test path, used for preflight consistency check of the implementation above
-  testPathForConsistencyCheck: '../ButtonLegacy.test.tsx',
-};
diff --git a/packages/components/Button/package.json b/packages/components/Button/package.json
index 809efeb8b5..240b2818f2 100644
--- a/packages/components/Button/package.json
+++ b/packages/components/Button/package.json
@@ -15,9 +15,9 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
-    "test": "yarn test-iOS && yarn test-win32",
-    "test-iOS": "fluentui-scripts jest -c __tests__/jest.config.ios.js",
-    "test-win32": "fluentui-scripts jest -c __tests__/jest.config.win32.js",
+    "test": "yarn test-ios && yarn test-win32",
+    "test-ios": "fluentui-scripts jest -c __tests__/iOS/jest.config.ios.js",
+    "test-win32": "fluentui-scripts jest -c __tests__/win32/jest.config.win32.js",
     "update-snapshots": "fluentui-scripts jest -u",
     "prettier": "fluentui-scripts prettier",
     "prettier-fix": "fluentui-scripts prettier --fix true"

From 8e3cf01bf2854475f99bfefcdb749adc5041fb71 Mon Sep 17 00:00:00 2001
From: Ruriko Araki <ruaraki@microsoft.com>
Date: Fri, 17 Feb 2023 16:11:00 -0800
Subject: [PATCH 11/11] Change files

---
 ...native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json

diff --git a/change/@fluentui-react-native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json b/change/@fluentui-react-native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json
new file mode 100644
index 0000000000..b609fb86f2
--- /dev/null
+++ b/change/@fluentui-react-native-button-4f7a77ca-3caa-43b1-a837-9c6b29b1e4ed.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Multi-plat jest setup",
+  "packageName": "@fluentui-react-native/button",
+  "email": "ruaraki@microsoft.com",
+  "dependentChangeType": "patch"
+}