From db520179cfa98c0451a2b74affc7ea15f9238ac0 Mon Sep 17 00:00:00 2001
From: Tristan Watanabe <tristan.watanabe@gmail.com>
Date: Mon, 7 Mar 2022 14:43:06 -0500
Subject: [PATCH] Checkbox (v8): convert tests to use testing-library (#21968)

---
 .../src/components/Checkbox/Checkbox.test.tsx | 131 ++-
 .../__snapshots__/Checkbox.test.tsx.snap      | 897 +++++++++---------
 2 files changed, 502 insertions(+), 526 deletions(-)

diff --git a/packages/react/src/components/Checkbox/Checkbox.test.tsx b/packages/react/src/components/Checkbox/Checkbox.test.tsx
index 14e5ea382d163..eb3ab0990e11c 100644
--- a/packages/react/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react/src/components/Checkbox/Checkbox.test.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
-import { mount, ReactWrapper } from 'enzyme';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Checkbox } from './Checkbox';
 import { isConformant } from '../../common/isConformant';
 import { resetIds } from '@fluentui/utilities';
-import type { ReactTestRenderer } from 'react-test-renderer';
 import type { IRefObject } from '@fluentui/utilities';
 import type { ICheckbox } from './Checkbox.types';
 
@@ -27,41 +26,27 @@ const IndeterminateControlledCheckbox: React.FunctionComponent = () => {
 };
 
 describe('Checkbox', () => {
-  let renderedComponent: ReactTestRenderer | undefined;
-  let component: ReactWrapper | undefined;
-
   beforeEach(() => {
     resetIds();
   });
 
   afterEach(() => {
     checkbox = undefined;
-    if (renderedComponent) {
-      renderedComponent.unmount();
-      renderedComponent = undefined;
-    }
-    if (component) {
-      component.unmount();
-      component = undefined;
-    }
   });
 
   it('renders unchecked correctly', () => {
-    renderedComponent = create(<Checkbox label="Standard checkbox" />);
-    const tree = renderedComponent.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<Checkbox label="Standard checkbox" />);
+    expect(container).toMatchSnapshot();
   });
 
   it('renders checked correctly', () => {
-    renderedComponent = create(<Checkbox label="Standard checkbox" checked />);
-    const tree = renderedComponent.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<Checkbox label="Standard checkbox" checked />);
+    expect(container).toMatchSnapshot();
   });
 
   it('renders indeterminate correctly', () => {
-    renderedComponent = create(<Checkbox label="Standard checkbox" indeterminate />);
-    const tree = renderedComponent.toJSON();
-    expect(tree).toMatchSnapshot();
+    const { container } = render(<Checkbox label="Standard checkbox" indeterminate />);
+    expect(container).toMatchSnapshot();
   });
 
   isConformant({
@@ -70,160 +55,150 @@ describe('Checkbox', () => {
   });
 
   it('respects id prop', () => {
-    component = mount(<Checkbox label="Standard checkbox" ariaDescribedBy="descriptionID" id="my-checkbox" />);
-    expect(component.find('input').prop('id')).toEqual('my-checkbox');
+    const { getByRole } = render(
+      <Checkbox label="Standard checkbox" ariaDescribedBy="descriptionID" id="my-checkbox" />,
+    );
+    expect(getByRole('checkbox').id).toEqual('my-checkbox');
   });
 
   it('defaults to unchecked non-indeterminate', () => {
-    component = mount(<Checkbox componentRef={checkboxRef} />);
+    const { getByRole } = render(<Checkbox componentRef={checkboxRef} />);
 
-    const input = component.find('input');
-    expect(input.prop('checked')).toBe(false);
+    expect(getByRole('checkbox').getAttribute('checked')).toBeNull();
     expect(checkbox!.checked).toBe(false);
     expect(checkbox!.indeterminate).toBe(false);
   });
 
   it('respects defaultChecked prop', () => {
-    component = mount(<Checkbox defaultChecked componentRef={checkboxRef} />);
+    const { getByRole } = render(<Checkbox defaultChecked componentRef={checkboxRef} />);
 
-    const input = component.find('input');
-    expect(input.prop('checked')).toBe(true);
+    expect(getByRole('checkbox').getAttribute('checked')).not.toBeNull();
     expect(checkbox!.checked).toBe(true);
   });
 
   it('ignores defaultChecked updates', () => {
-    component = mount(<Checkbox defaultChecked componentRef={checkboxRef} />);
-    component.setProps({ defaultChecked: false });
-    expect(component.find('input').prop('checked')).toBe(true);
+    const firstCheckbox = render(<Checkbox defaultChecked componentRef={checkboxRef} />);
+    firstCheckbox.rerender(<Checkbox defaultChecked={false} componentRef={checkboxRef} />);
+    expect(firstCheckbox.container.querySelector('.is-checked')).toBeTruthy();
     expect(checkbox!.checked).toBe(true);
-    component.unmount();
 
-    component = mount(<Checkbox componentRef={checkboxRef} />);
-    component.setProps({ defaultChecked: true });
-    expect(component.find('input').prop('checked')).toBe(false);
+    const secondCheckbox = render(<Checkbox componentRef={checkboxRef} />);
+    secondCheckbox.rerender(<Checkbox defaultChecked={true} componentRef={checkboxRef} />);
+    expect(secondCheckbox.container.querySelector('.is-checked')).toBeFalsy();
     expect(checkbox!.checked).toBe(false);
   });
 
   it('respects checked prop', () => {
-    component = mount(<Checkbox checked componentRef={checkboxRef} />);
+    const { getByRole } = render(<Checkbox checked componentRef={checkboxRef} />);
 
-    const input = component.find('input');
-    expect(input.prop('checked')).toBe(true);
+    expect(getByRole('checkbox').getAttribute('checked')).not.toBeNull();
     expect(checkbox!.checked).toBe(true);
   });
 
   it('respects checked updates', () => {
-    component = mount(<Checkbox checked componentRef={checkboxRef} />);
+    const { container, rerender } = render(<Checkbox checked componentRef={checkboxRef} />);
+    rerender(<Checkbox checked={false} componentRef={checkboxRef} />);
 
-    component.setProps({ checked: false });
-    expect(component.find('input').prop('checked')).toBe(false);
+    expect(container.querySelector('.is-checked')).toBeFalsy();
     expect(checkbox!.checked).toBe(false);
   });
 
   it('automatically updates on change when uncontrolled', () => {
     const onChange = jest.fn();
-    component = mount(<Checkbox onChange={onChange} componentRef={checkboxRef} />);
+    const { container, getByRole } = render(<Checkbox onChange={onChange} componentRef={checkboxRef} />);
 
-    component.find('input').simulate('change');
+    userEvent.click(getByRole('checkbox'));
 
-    expect(component.find('input').prop('checked')).toBe(true);
+    expect(container.querySelector('.is-checked')).toBeTruthy();
     expect(checkbox!.checked).toBe(true);
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
   it('does not automatically update on change when controlled', () => {
     const onChange = jest.fn();
-    component = mount(<Checkbox checked={false} onChange={onChange} componentRef={checkboxRef} />);
+    const { container, getByRole, rerender } = render(
+      <Checkbox checked={false} onChange={onChange} componentRef={checkboxRef} />,
+    );
 
-    component.find('input').simulate('change');
+    userEvent.click(getByRole('checkbox'));
 
     // doesn't update automatically (but calls onChange)
-    expect(component.find('input').prop('checked')).toBe(false);
+    expect(container.querySelector('.is-checked')).toBeFalsy();
     expect(checkbox!.checked).toBe(false);
     expect(onChange).toHaveBeenCalledTimes(1);
 
     // updates when props update
-    component.setProps({ checked: true });
-    expect(component.find('input').prop('checked')).toBe(true);
+    rerender(<Checkbox checked={true} onChange={onChange} componentRef={checkboxRef} />);
+    expect(container.querySelector('.is-checked')).toBeTruthy();
     expect(checkbox!.checked).toBe(true);
     // doesn't call onChange for props update
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
   it('respects defaultIndeterminate prop', () => {
-    component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
+    render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
 
     expect(checkbox!.indeterminate).toEqual(true);
   });
 
   it('respects defaultIndeterminate prop when defaultChecked is true', () => {
-    component = mount(<Checkbox defaultIndeterminate defaultChecked componentRef={checkboxRef} />);
+    render(<Checkbox defaultIndeterminate defaultChecked componentRef={checkboxRef} />);
 
     expect(checkbox!.indeterminate).toEqual(true);
   });
 
   it('ignores defaultIndeterminate updates', () => {
-    component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
-    component.setProps({ defaultIndeterminate: false });
+    const firstCheckbox = render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
+    firstCheckbox.rerender(<Checkbox defaultIndeterminate={false} componentRef={checkboxRef} />);
     expect(checkbox!.indeterminate).toEqual(true);
-    component.unmount();
 
-    component = mount(<Checkbox componentRef={checkboxRef} />);
-    component.setProps({ defaultIndeterminate: true });
+    const secondCheckbox = render(<Checkbox componentRef={checkboxRef} />);
+    secondCheckbox.rerender(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
     expect(checkbox!.checked).toBe(false);
     expect(checkbox!.indeterminate).toEqual(false);
   });
 
   it('removes uncontrolled indeterminate state', () => {
-    component = mount(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
+    const { container, getByRole } = render(<Checkbox defaultIndeterminate componentRef={checkboxRef} />);
 
-    let input = component.find('input');
-    expect(input.prop('checked')).toBe(false);
+    expect(container.querySelector('.is-checked')).toBeFalsy();
     expect(checkbox!.indeterminate).toEqual(true);
 
-    input.simulate('change');
+    userEvent.click(getByRole('checkbox'));
 
-    // get an updated ReactWrapper for the input (otherwise it would be out of sync)
-    input = component.find('input');
-    expect(input.prop('checked')).toBe(false);
+    expect(container.querySelector('.is-checked')).toBeFalsy();
     expect(checkbox!.indeterminate).toEqual(false);
   });
 
   it('renders with indeterminate when controlled', () => {
-    component = mount(<IndeterminateControlledCheckbox />);
+    const { getByRole } = render(<IndeterminateControlledCheckbox />);
 
-    let input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(true);
 
-    input.simulate('change', { target: { checked: true } });
+    userEvent.click(getByRole('checkbox'));
 
-    input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(false);
   });
 
   it('removes controlled indeterminate', () => {
-    component = mount(<IndeterminateControlledCheckbox />);
+    const { getByRole } = render(<IndeterminateControlledCheckbox />);
 
-    let input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(true);
     expect(checkbox!.checked).toEqual(false);
 
-    input.simulate('change');
+    userEvent.click(getByRole('checkbox'));
 
-    input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(false);
     expect(checkbox!.checked).toEqual(false);
   });
 
   it("doesn't remove controlled indeterminate when no onChange provided", () => {
-    component = mount(<Checkbox indeterminate={true} checked={false} componentRef={checkboxRef} />);
+    const { getByRole } = render(<Checkbox indeterminate={true} checked={false} componentRef={checkboxRef} />);
 
-    let input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(true);
 
-    input.simulate('change');
+    userEvent.click(getByRole('checkbox'));
 
-    input = component.find('input');
     expect(checkbox!.indeterminate).toEqual(true);
   });
 });
diff --git a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index c42bd6f70e72c..438b502b96a8d 100644
--- a/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -1,514 +1,515 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Checkbox renders checked correctly 1`] = `
-<div
-  className=
-      ms-Checkbox
-      is-checked
-      is-enabled
-      {
-        display: flex;
-        position: relative;
-      }
-      &:hover .ms-Checkbox-checkbox {
-        background: #005a9e;
-        border-color: #005a9e;
-      }
-      &:focus .ms-Checkbox-checkbox {
-        background: #005a9e;
-        border-color: #005a9e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
-        background: Highlight;
-        border-color: Highlight;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-checkbox {
-        background: Highlight;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:hover .ms-Checkbox-checkbox {
-        background: Highlight;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:hover .ms-Checkbox-checkmark {
-        color: Window;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
-        color: Window;
-      }
-      &:hover .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
-        color: WindowText;
-      }
-      &:focus .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
-        color: WindowText;
-      }
->
-  <input
-    checked={true}
-    className=
-
-        {
-          background: none;
-          opacity: 0;
-          position: absolute;
-        }
-        .ms-Fabric--isFocusVisible &:focus + label::before {
-          outline-offset: 2px;
-          outline: 1px solid #605e5c;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
-          outline: 1px solid WindowText;
-        }
-    data-ktp-execute-target={true}
-    id="checkbox-0"
-    onChange={[Function]}
-    type="checkbox"
-  />
-  <label
-    className=
-        ms-Checkbox-label
+<div>
+  <div
+    class=
+        ms-Checkbox
+        is-checked
+        is-enabled
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: flex-start;
-          cursor: pointer;
           display: flex;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
           position: relative;
-          user-select: none;
-        }
-        &::before {
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          pointer-events: none;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-        }
-    htmlFor="checkbox-0"
+        }
+        &:hover .ms-Checkbox-checkbox {
+          background: #005a9e;
+          border-color: #005a9e;
+        }
+        &:focus .ms-Checkbox-checkbox {
+          background: #005a9e;
+          border-color: #005a9e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
+          background: Highlight;
+          border-color: Highlight;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-checkbox {
+          background: Highlight;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:hover .ms-Checkbox-checkbox {
+          background: Highlight;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus:hover .ms-Checkbox-checkmark {
+          color: Window;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
+          color: Window;
+        }
+        &:hover .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
+          color: WindowText;
+        }
+        &:focus .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
+          color: WindowText;
+        }
   >
-    <div
-      className=
-          ms-Checkbox-checkbox
+    <input
+      checked=""
+      class=
+
+          {
+            background: none;
+            opacity: 0;
+            position: absolute;
+          }
+          .ms-Fabric--isFocusVisible &:focus + label::before {
+            outline-offset: 2px;
+            outline: 1px solid #605e5c;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+            outline: 1px solid WindowText;
+          }
+      data-ktp-execute-target="true"
+      id="checkbox-0"
+      type="checkbox"
+    />
+    <label
+      class=
+          ms-Checkbox-label
           {
-            align-items: center;
-            background: #0078d4;
-            border-color: #0078d4;
-            border-radius: 2px;
-            border: 1px solid #323130;
-            box-sizing: border-box;
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: flex-start;
+            cursor: pointer;
             display: flex;
-            flex-shrink: 0;
-            height: 20px;
-            justify-content: center;
-            margin-right: 4px;
-            overflow: hidden;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
             position: relative;
-            transition-duration: 200ms;
-            transition-property: background, border, border-color;
-            transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-            width: 20px;
+            user-select: none;
           }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            background: Highlight;
-            border-color: Highlight;
-            forced-color-adjust: none;
+          &::before {
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            pointer-events: none;
+            position: absolute;
+            right: 0px;
+            top: 0px;
           }
-      data-ktp-target={true}
+      for="checkbox-0"
     >
-      <i
-        aria-hidden={true}
-        className=
-            ms-Checkbox-checkmark
+      <div
+        class=
+            ms-Checkbox-checkbox
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              color: #ffffff;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-style: normal;
-              font-weight: normal;
-              opacity: 1;
-              speak: none;
+              align-items: center;
+              background: #0078d4;
+              border-color: #0078d4;
+              border-radius: 2px;
+              border: 1px solid #323130;
+              box-sizing: border-box;
+              display: flex;
+              flex-shrink: 0;
+              height: 20px;
+              justify-content: center;
+              margin-right: 4px;
+              overflow: hidden;
+              position: relative;
+              transition-duration: 200ms;
+              transition-property: background, border, border-color;
+              transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+              width: 20px;
             }
             @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
               -ms-high-contrast-adjust: none;
-              color: Window;
+              background: Highlight;
+              border-color: Highlight;
               forced-color-adjust: none;
             }
-        data-icon-name="CheckMark"
+        data-ktp-target="true"
       >
-        
-      </i>
-    </div>
-    <span
-      className=
-          ms-Checkbox-text
-          {
-            color: #323130;
-            font-size: 14px;
-            line-height: 20px;
-            margin-left: 4px;
-          }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            color: WindowText;
-            forced-color-adjust: none;
-          }
-    >
-      Standard checkbox
-    </span>
-  </label>
+        <i
+          aria-hidden="true"
+          class=
+              ms-Checkbox-checkmark
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #ffffff;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                opacity: 1;
+                speak: none;
+              }
+              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                -ms-high-contrast-adjust: none;
+                color: Window;
+                forced-color-adjust: none;
+              }
+          data-icon-name="CheckMark"
+        >
+          
+        </i>
+      </div>
+      <span
+        class=
+            ms-Checkbox-text
+            {
+              color: #323130;
+              font-size: 14px;
+              line-height: 20px;
+              margin-left: 4px;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+              -ms-high-contrast-adjust: none;
+              color: WindowText;
+              forced-color-adjust: none;
+            }
+      >
+        Standard checkbox
+      </span>
+    </label>
+  </div>
 </div>
 `;
 
 exports[`Checkbox renders indeterminate correctly 1`] = `
-<div
-  className=
-      ms-Checkbox
-      is-enabled
-      {
-        display: flex;
-        position: relative;
-      }
-      &:hover .ms-Checkbox-checkbox {
-        border-color: #005a9e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
-        border-color: WindowText;
-      }
-      &:focus .ms-Checkbox-checkbox {
-        border-color: #005a9e;
-      }
-      &:hover .ms-Checkbox-checkmark {
-        color: #605e5c;
-        opacity: 0;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
-        color: Highlight;
-      }
-      &:hover .ms-Checkbox-checkbox:after {
-        border-color: #005a9e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox:after {
-        border-color: WindowText;
-      }
-      &:hover .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
-        color: WindowText;
-      }
-      &:focus .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
-        color: WindowText;
-      }
->
-  <input
-    aria-checked="mixed"
-    checked={false}
-    className=
-
-        {
-          background: none;
-          opacity: 0;
-          position: absolute;
-        }
-        .ms-Fabric--isFocusVisible &:focus + label::before {
-          outline-offset: 2px;
-          outline: 1px solid #605e5c;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
-          outline: 1px solid WindowText;
-        }
-    data-ktp-execute-target={true}
-    id="checkbox-0"
-    onChange={[Function]}
-    type="checkbox"
-  />
-  <label
-    className=
-        ms-Checkbox-label
+<div>
+  <div
+    class=
+        ms-Checkbox
+        is-enabled
         {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: flex-start;
-          cursor: pointer;
           display: flex;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
           position: relative;
-          user-select: none;
-        }
-        &::before {
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          pointer-events: none;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-        }
-    htmlFor="checkbox-0"
+        }
+        &:hover .ms-Checkbox-checkbox {
+          border-color: #005a9e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
+          border-color: WindowText;
+        }
+        &:focus .ms-Checkbox-checkbox {
+          border-color: #005a9e;
+        }
+        &:hover .ms-Checkbox-checkmark {
+          color: #605e5c;
+          opacity: 0;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
+          color: Highlight;
+        }
+        &:hover .ms-Checkbox-checkbox:after {
+          border-color: #005a9e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox:after {
+          border-color: WindowText;
+        }
+        &:hover .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
+          color: WindowText;
+        }
+        &:focus .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
+          color: WindowText;
+        }
   >
-    <div
-      className=
-          ms-Checkbox-checkbox
+    <input
+      aria-checked="mixed"
+      class=
+
           {
-            align-items: center;
-            border-color: #0078d4;
-            border-radius: 2px;
-            border: 1px solid #323130;
-            box-sizing: border-box;
+            background: none;
+            opacity: 0;
+            position: absolute;
+          }
+          .ms-Fabric--isFocusVisible &:focus + label::before {
+            outline-offset: 2px;
+            outline: 1px solid #605e5c;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+            outline: 1px solid WindowText;
+          }
+      data-ktp-execute-target="true"
+      id="checkbox-0"
+      type="checkbox"
+    />
+    <label
+      class=
+          ms-Checkbox-label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: flex-start;
+            cursor: pointer;
             display: flex;
-            flex-shrink: 0;
-            height: 20px;
-            justify-content: center;
-            margin-right: 4px;
-            overflow: hidden;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
             position: relative;
-            transition-duration: 200ms;
-            transition-property: background, border, border-color;
-            transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-            width: 20px;
+            user-select: none;
           }
-          &:after {
-            border-color: #0078d4;
-            border-radius: 2px;
-            border-style: solid;
-            border-width: 5px;
-            box-sizing: border-box;
+          &::before {
+            bottom: 0px;
             content: "";
-            height: 10px;
-            left: 4px;
+            left: 0px;
+            pointer-events: none;
             position: absolute;
-            top: 4px;
-            transition-duration: 200ms;
-            transition-property: border-width, border, border-color;
-            transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-            width: 10px;
+            right: 0px;
+            top: 0px;
           }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){&:after {
-            border-color: WindowText;
-          }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            border-color: WindowText;
-            forced-color-adjust: none;
-          }
-      data-ktp-target={true}
+      for="checkbox-0"
     >
-      <i
-        aria-hidden={true}
-        className=
-            ms-Checkbox-checkmark
+      <div
+        class=
+            ms-Checkbox-checkbox
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              color: #ffffff;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-style: normal;
-              font-weight: normal;
-              opacity: 0;
-              speak: none;
+              align-items: center;
+              border-color: #0078d4;
+              border-radius: 2px;
+              border: 1px solid #323130;
+              box-sizing: border-box;
+              display: flex;
+              flex-shrink: 0;
+              height: 20px;
+              justify-content: center;
+              margin-right: 4px;
+              overflow: hidden;
+              position: relative;
+              transition-duration: 200ms;
+              transition-property: background, border, border-color;
+              transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+              width: 20px;
+            }
+            &:after {
+              border-color: #0078d4;
+              border-radius: 2px;
+              border-style: solid;
+              border-width: 5px;
+              box-sizing: border-box;
+              content: "";
+              height: 10px;
+              left: 4px;
+              position: absolute;
+              top: 4px;
+              transition-duration: 200ms;
+              transition-property: border-width, border, border-color;
+              transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+              width: 10px;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){&:after {
+              border-color: WindowText;
             }
             @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
               -ms-high-contrast-adjust: none;
-              color: Window;
+              border-color: WindowText;
               forced-color-adjust: none;
             }
-        data-icon-name="CheckMark"
+        data-ktp-target="true"
       >
-        
-      </i>
-    </div>
-    <span
-      className=
-          ms-Checkbox-text
-          {
-            color: #323130;
-            font-size: 14px;
-            line-height: 20px;
-            margin-left: 4px;
-          }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            color: WindowText;
-            forced-color-adjust: none;
-          }
-    >
-      Standard checkbox
-    </span>
-  </label>
+        <i
+          aria-hidden="true"
+          class=
+              ms-Checkbox-checkmark
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #ffffff;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                opacity: 0;
+                speak: none;
+              }
+              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                -ms-high-contrast-adjust: none;
+                color: Window;
+                forced-color-adjust: none;
+              }
+          data-icon-name="CheckMark"
+        >
+          
+        </i>
+      </div>
+      <span
+        class=
+            ms-Checkbox-text
+            {
+              color: #323130;
+              font-size: 14px;
+              line-height: 20px;
+              margin-left: 4px;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+              -ms-high-contrast-adjust: none;
+              color: WindowText;
+              forced-color-adjust: none;
+            }
+      >
+        Standard checkbox
+      </span>
+    </label>
+  </div>
 </div>
 `;
 
 exports[`Checkbox renders unchecked correctly 1`] = `
-<div
-  className=
-      ms-Checkbox
-      is-enabled
-      {
-        display: flex;
-        position: relative;
-      }
-      &:hover .ms-Checkbox-checkbox {
-        border-color: #323130;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
-        border-color: Highlight;
-      }
-      &:focus .ms-Checkbox-checkbox {
-        border-color: #323130;
-      }
-      &:hover .ms-Checkbox-checkmark {
-        color: #605e5c;
-        opacity: 1;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
-        color: Highlight;
-      }
-      &:hover .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
-        color: WindowText;
-      }
-      &:focus .ms-Checkbox-text {
-        color: #201f1e;
-      }
-      @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
-        color: WindowText;
-      }
->
-  <input
-    checked={false}
-    className=
-
+<div>
+  <div
+    class=
+        ms-Checkbox
+        is-enabled
         {
-          background: none;
-          opacity: 0;
-          position: absolute;
-        }
-        .ms-Fabric--isFocusVisible &:focus + label::before {
-          outline-offset: 2px;
-          outline: 1px solid #605e5c;
-        }
-        @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
-          outline: 1px solid WindowText;
-        }
-    data-ktp-execute-target={true}
-    id="checkbox-0"
-    onChange={[Function]}
-    type="checkbox"
-  />
-  <label
-    className=
-        ms-Checkbox-label
-        {
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          align-items: flex-start;
-          cursor: pointer;
           display: flex;
-          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-          font-size: 14px;
-          font-weight: 400;
           position: relative;
-          user-select: none;
-        }
-        &::before {
-          bottom: 0px;
-          content: "";
-          left: 0px;
-          pointer-events: none;
-          position: absolute;
-          right: 0px;
-          top: 0px;
-        }
-    htmlFor="checkbox-0"
+        }
+        &:hover .ms-Checkbox-checkbox {
+          border-color: #323130;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkbox {
+          border-color: Highlight;
+        }
+        &:focus .ms-Checkbox-checkbox {
+          border-color: #323130;
+        }
+        &:hover .ms-Checkbox-checkmark {
+          color: #605e5c;
+          opacity: 1;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-checkmark {
+          color: Highlight;
+        }
+        &:hover .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:hover .ms-Checkbox-text {
+          color: WindowText;
+        }
+        &:focus .ms-Checkbox-text {
+          color: #201f1e;
+        }
+        @media screen and (-ms-high-contrast: active), (forced-colors: active){&:focus .ms-Checkbox-text {
+          color: WindowText;
+        }
   >
-    <div
-      className=
-          ms-Checkbox-checkbox
+    <input
+      class=
+
           {
-            align-items: center;
-            border-radius: 2px;
-            border: 1px solid #323130;
-            box-sizing: border-box;
+            background: none;
+            opacity: 0;
+            position: absolute;
+          }
+          .ms-Fabric--isFocusVisible &:focus + label::before {
+            outline-offset: 2px;
+            outline: 1px solid #605e5c;
+          }
+          @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+            outline: 1px solid WindowText;
+          }
+      data-ktp-execute-target="true"
+      id="checkbox-0"
+      type="checkbox"
+    />
+    <label
+      class=
+          ms-Checkbox-label
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            align-items: flex-start;
+            cursor: pointer;
             display: flex;
-            flex-shrink: 0;
-            height: 20px;
-            justify-content: center;
-            margin-right: 4px;
-            overflow: hidden;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 14px;
+            font-weight: 400;
             position: relative;
-            transition-duration: 200ms;
-            transition-property: background, border, border-color;
-            transition-timing-function: cubic-bezier(.4, 0, .23, 1);
-            width: 20px;
+            user-select: none;
           }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            border-color: WindowText;
-            forced-color-adjust: none;
+          &::before {
+            bottom: 0px;
+            content: "";
+            left: 0px;
+            pointer-events: none;
+            position: absolute;
+            right: 0px;
+            top: 0px;
           }
-      data-ktp-target={true}
+      for="checkbox-0"
     >
-      <i
-        aria-hidden={true}
-        className=
-            ms-Checkbox-checkmark
+      <div
+        class=
+            ms-Checkbox-checkbox
             {
-              -moz-osx-font-smoothing: grayscale;
-              -webkit-font-smoothing: antialiased;
-              color: #ffffff;
-              display: inline-block;
-              font-family: "FabricMDL2Icons";
-              font-style: normal;
-              font-weight: normal;
-              opacity: 0;
-              speak: none;
+              align-items: center;
+              border-radius: 2px;
+              border: 1px solid #323130;
+              box-sizing: border-box;
+              display: flex;
+              flex-shrink: 0;
+              height: 20px;
+              justify-content: center;
+              margin-right: 4px;
+              overflow: hidden;
+              position: relative;
+              transition-duration: 200ms;
+              transition-property: background, border, border-color;
+              transition-timing-function: cubic-bezier(.4, 0, .23, 1);
+              width: 20px;
             }
             @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
               -ms-high-contrast-adjust: none;
-              color: Window;
+              border-color: WindowText;
               forced-color-adjust: none;
             }
-        data-icon-name="CheckMark"
+        data-ktp-target="true"
       >
-        
-      </i>
-    </div>
-    <span
-      className=
-          ms-Checkbox-text
-          {
-            color: #323130;
-            font-size: 14px;
-            line-height: 20px;
-            margin-left: 4px;
-          }
-          @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
-            -ms-high-contrast-adjust: none;
-            color: WindowText;
-            forced-color-adjust: none;
-          }
-    >
-      Standard checkbox
-    </span>
-  </label>
+        <i
+          aria-hidden="true"
+          class=
+              ms-Checkbox-checkmark
+              {
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                color: #ffffff;
+                display: inline-block;
+                font-family: "FabricMDL2Icons";
+                font-style: normal;
+                font-weight: normal;
+                opacity: 0;
+                speak: none;
+              }
+              @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+                -ms-high-contrast-adjust: none;
+                color: Window;
+                forced-color-adjust: none;
+              }
+          data-icon-name="CheckMark"
+        >
+          
+        </i>
+      </div>
+      <span
+        class=
+            ms-Checkbox-text
+            {
+              color: #323130;
+              font-size: 14px;
+              line-height: 20px;
+              margin-left: 4px;
+            }
+            @media screen and (-ms-high-contrast: active), (forced-colors: active){& {
+              -ms-high-contrast-adjust: none;
+              color: WindowText;
+              forced-color-adjust: none;
+            }
+      >
+        Standard checkbox
+      </span>
+    </label>
+  </div>
 </div>
 `;