diff --git a/frontend/test/metabase/components/Button.unit.spec.js b/frontend/test/metabase/components/Button.unit.spec.js
index c0d26e32e84d23960f2733be1c44b352aa73f381..c748ab5dc93047bb605c95a8fca2bd2c9bfa3d65 100644
--- a/frontend/test/metabase/components/Button.unit.spec.js
+++ b/frontend/test/metabase/components/Button.unit.spec.js
@@ -1,27 +1,29 @@
 import React from "react";
-import renderer from "react-test-renderer";
-
-import { render } from "enzyme";
+import "@testing-library/jest-dom/extend-expect";
+import { render, screen } from "@testing-library/react";
 
 import Button from "metabase/components/Button";
 
 describe("Button", () => {
+  const title = "Clickity click";
+
   it("should render correctly", () => {
-    const tree = renderer.create(<Button>Clickity click</Button>).toJSON();
+    render(<Button>{title}</Button>);
 
-    expect(tree).toMatchSnapshot();
+    // this is why `getByRole()` is so handy and preferred by RTL creators
+    // name is derived from text content: https://www.w3.org/TR/wai-aria-practices-1.1/#naming_techniques
+    screen.getByRole("button", { name: title });
   });
+
   it("should render correctly with an icon", () => {
-    const tree = renderer
-      .create(<Button icon="star">Clickity click</Button>)
-      .toJSON();
+    render(<Button icon="star">{title}</Button>);
 
-    expect(tree).toMatchSnapshot();
+    screen.getByRole("img", { name: "star icon" });
   });
 
   it("should render a primary button given the primary prop", () => {
-    const button = render(<Button primary>Clickity click</Button>);
+    render(<Button primary>{title}</Button>);
 
-    expect(button.hasClass("Button--primary")).toBe(true);
+    expect(screen.getByRole("button")).toHaveClass("Button--primary");
   });
 });
diff --git a/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap b/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap
deleted file mode 100644
index dd8275762712255a0990637035250bb0bbdbacf7..0000000000000000000000000000000000000000
--- a/frontend/test/metabase/components/__snapshots__/Button.unit.spec.js.snap
+++ /dev/null
@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button should render correctly 1`] = `
-<button
-  className="Button sc-bdVaJa bDWFJH flex-no-shrink "
->
-  <div
-    className="flex layout-centered"
-    style={null}
-  >
-    <div
-      className=""
-    >
-      Clickity click
-    </div>
-  </div>
-</button>
-`;
-
-exports[`Button should render correctly with an icon 1`] = `
-<button
-  className="Button sc-bdVaJa bDWFJH flex-no-shrink "
->
-  <div
-    className="flex layout-centered"
-    style={null}
-  >
-    <svg
-      aria-label="star icon"
-      className="Icon Icon-star Icon-sc-1x67v3y-1 hFNRPZ"
-      fill="currentcolor"
-      height={14}
-      role="img"
-      viewBox="0 0 32 32"
-      width={14}
-    >
-      <path
-        d="M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11"
-      />
-    </svg>
-    <div
-      className="ml1"
-    >
-      Clickity click
-    </div>
-  </div>
-</button>
-`;