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"
+}
diff --git a/packages/components/Button/.npmignore b/packages/components/Button/.npmignore
new file mode 100644
index 0000000000..3a62fb2977
--- /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
diff --git a/packages/components/Button/__tests__/ButtonLegacy.test.tsx b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
new file mode 100644
index 0000000000..e07d8212f0
--- /dev/null
+++ b/packages/components/Button/__tests__/ButtonLegacy.test.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Button } from '../src/deprecated/Button';
+import * as renderer from 'react-test-renderer';
+
+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
new file mode 100644
index 0000000000..57bebab90f
--- /dev/null
+++ b/packages/components/Button/__tests__/ButtonV1.test.tsx
@@ -0,0 +1,86 @@
+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';
+
+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 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__/CompoundButton.test.tsx b/packages/components/Button/__tests__/CompoundButton.test.tsx
new file mode 100644
index 0000000000..e4e600f99d
--- /dev/null
+++ b/packages/components/Button/__tests__/CompoundButton.test.tsx
@@ -0,0 +1,29 @@
+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';
+
+export const compountButtonTests = () => {
+  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__/FAB.test.tsx b/packages/components/Button/__tests__/FAB.test.tsx
new file mode 100644
index 0000000000..9e77972174
--- /dev/null
+++ b/packages/components/Button/__tests__/FAB.test.tsx
@@ -0,0 +1,67 @@
+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' };
+
+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('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__/ToggleButton.test.tsx b/packages/components/Button/__tests__/ToggleButton.test.tsx
new file mode 100644
index 0000000000..8a4e86b60a
--- /dev/null
+++ b/packages/components/Button/__tests__/ToggleButton.test.tsx
@@ -0,0 +1,29 @@
+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';
+
+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', () => {
+    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__/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/src/__snapshots__/Button.test.tsx.snap b/packages/components/Button/__tests__/iOS/__snapshots__/Button.test.tsx.snap
similarity index 62%
rename from packages/components/Button/src/__snapshots__/Button.test.tsx.snap
rename to packages/components/Button/__tests__/iOS/__snapshots__/Button.test.tsx.snap
index 5befa8e29b..9f46071040 100644
--- a/packages/components/Button/src/__snapshots__/Button.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/jest.config.ios.js b/packages/components/Button/__tests__/iOS/jest.config.ios.js
new file mode 100644
index 0000000000..350a36f763
--- /dev/null
+++ b/packages/components/Button/__tests__/iOS/jest.config.ios.js
@@ -0,0 +1,5 @@
+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/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__/Button.test.tsx.snap b/packages/components/Button/__tests__/win32/__snapshots__/Button.test.tsx.snap
new file mode 100644
index 0000000000..3654879bf3
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/__snapshots__/Button.test.tsx.snap
@@ -0,0 +1,1010 @@
+// 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>
+`;
+
+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/jest.config.win32.js b/packages/components/Button/__tests__/win32/jest.config.win32.js
new file mode 100644
index 0000000000..29326de927
--- /dev/null
+++ b/packages/components/Button/__tests__/win32/jest.config.win32.js
@@ -0,0 +1,5 @@
+const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+module.exports = configureReactNativeJest('win32', {
+  roots: ['.'],
+  testRegex: '(.*|\\.(test|spec))\\.(ts|tsx)$',
+});
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 4a353fb19c..240b2818f2 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",
+    "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"
diff --git a/packages/components/Button/src/Button.test.tsx b/packages/components/Button/src/Button.test.tsx
deleted file mode 100644
index c459ae6179..0000000000
--- a/packages/components/Button/src/Button.test.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-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';
-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/src/CompoundButton/CompoundButton.test.tsx b/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx
deleted file mode 100644
index 533b667731..0000000000
--- a/packages/components/Button/src/CompoundButton/CompoundButton.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { CompoundButton } from './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/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap b/packages/components/Button/src/CompoundButton/__snapshots__/CompoundButton.test.tsx.snap
deleted file mode 100644
index 77e82b1a02..0000000000
--- a/packages/components/Button/src/CompoundButton/__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/src/FAB/FAB.test.tsx b/packages/components/Button/src/FAB/FAB.test.tsx
deleted file mode 100644
index f4b9bb43b1..0000000000
--- a/packages/components/Button/src/FAB/FAB.test.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { FAB } from './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/src/FAB/__snapshots__/FAB.test.tsx.snap b/packages/components/Button/src/FAB/__snapshots__/FAB.test.tsx.snap
deleted file mode 100644
index f5820b1a58..0000000000
--- a/packages/components/Button/src/FAB/__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/src/ToggleButton/ToggleButton.test.tsx b/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx
deleted file mode 100644
index ef3c34c83d..0000000000
--- a/packages/components/Button/src/ToggleButton/ToggleButton.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { ToggleButton } from './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/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap b/packages/components/Button/src/ToggleButton/__snapshots__/ToggleButton.test.tsx.snap
deleted file mode 100644
index 2ba6c42753..0000000000
--- a/packages/components/Button/src/ToggleButton/__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/src/deprecated/Button.test.tsx b/packages/components/Button/src/deprecated/Button.test.tsx
deleted file mode 100644
index 19dc10d239..0000000000
--- a/packages/components/Button/src/deprecated/Button.test.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Button } from './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/src/deprecated/__snapshots__/Button.test.tsx.snap b/packages/components/Button/src/deprecated/__snapshots__/Button.test.tsx.snap
deleted file mode 100644
index 73c95c813a..0000000000
--- a/packages/components/Button/src/deprecated/__snapshots__/Button.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/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),
   });