diff --git a/packages/js/tests/insights/components/__snapshots__/text-formality-upsell.test.js.snap b/packages/js/tests/insights/components/__snapshots__/text-formality-upsell.test.js.snap
new file mode 100644
index 00000000000..fd2379e7647
--- /dev/null
+++ b/packages/js/tests/insights/components/__snapshots__/text-formality-upsell.test.js.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`a test for TextFormalityUpsell component renders the component in Elementor 1`] = `
+.c0 {
+  border: 0;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
+  -webkit-transform: translateY(1em);
+  -ms-transform: translateY(1em);
+  transform: translateY(1em);
+}
+
+<div>
+  <p>
+    <b>
+      Yoast SEO Premium
+    </b>
+     will help you assess the formality level of your text.
+  </p>
+  <a
+    className="yoast-button yoast-button-upsell"
+    href="https://yoa.st/formality-upsell-elementor"
+    rel={null}
+    target="_blank"
+  >
+    Unlock with Premium
+    <span
+      aria-hidden="true"
+      className="yoast-button-upsell__caret"
+    />
+    <span
+      className="c0"
+    >
+      (Opens in a new browser tab)
+    </span>
+  </a>
+</div>
+`;
+
+exports[`a test for TextFormalityUpsell component renders the component in metabox 1`] = `
+.c0 {
+  border: 0;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
+  -webkit-transform: translateY(1em);
+  -ms-transform: translateY(1em);
+  transform: translateY(1em);
+}
+
+<div>
+  <p>
+    <b>
+      Yoast SEO Premium
+    </b>
+     will help you assess the formality level of your text.
+  </p>
+  <a
+    className="yoast-button yoast-button-upsell"
+    href="https://yoa.st/formality-upsell-metabox"
+    rel={null}
+    target="_blank"
+  >
+    Unlock with Premium
+    <span
+      aria-hidden="true"
+      className="yoast-button-upsell__caret"
+    />
+    <span
+      className="c0"
+    >
+      (Opens in a new browser tab)
+    </span>
+  </a>
+</div>
+`;
+
+exports[`a test for TextFormalityUpsell component renders the component in sidebar 1`] = `
+.c0 {
+  border: 0;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute !important;
+  width: 1px;
+  word-wrap: normal !important;
+  -webkit-transform: translateY(1em);
+  -ms-transform: translateY(1em);
+  transform: translateY(1em);
+}
+
+<div>
+  <p>
+    <b>
+      Yoast SEO Premium
+    </b>
+     will help you assess the formality level of your text.
+  </p>
+  <a
+    className="yoast-button yoast-button-upsell"
+    href="https://yoa.st/formality-upsell-sidebar"
+    rel={null}
+    target="_blank"
+  >
+    Unlock with Premium
+    <span
+      aria-hidden="true"
+      className="yoast-button-upsell__caret"
+    />
+    <span
+      className="c0"
+    >
+      (Opens in a new browser tab)
+    </span>
+  </a>
+</div>
+`;
diff --git a/packages/js/tests/insights/components/text-formality-upsell.test.js b/packages/js/tests/insights/components/text-formality-upsell.test.js
new file mode 100644
index 00000000000..4b789b70065
--- /dev/null
+++ b/packages/js/tests/insights/components/text-formality-upsell.test.js
@@ -0,0 +1,33 @@
+import TextFormalityUpsell from "../../../src/insights/components/text-formality-upsell";
+import React from "react";
+import renderer from "react-test-renderer";
+
+window.wpseoAdminL10n = {
+	"shortlinks-insights-upsell-sidebar-text_formality": "https://yoa.st/formality-upsell-sidebar",
+	"shortlinks-insights-upsell-metabox-text_formality": "https://yoa.st/formality-upsell-metabox",
+	"shortlinks-insights-upsell-elementor-text_formality": "https://yoa.st/formality-upsell-elementor",
+};
+
+describe( "a test for TextFormalityUpsell component", () => {
+	it( "renders the component in sidebar", () => {
+		const render = renderer.create( <TextFormalityUpsell location="sidebar" /> );
+
+		const tree = render.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+	it( "renders the component in metabox", () => {
+		const render = renderer.create( <TextFormalityUpsell location="metabox" /> );
+
+		const tree = render.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+	it( "renders the component in Elementor", () => {
+		const render = renderer.create( <TextFormalityUpsell location="elementor" /> );
+
+		const tree = render.toJSON();
+
+		expect( tree ).toMatchSnapshot();
+	} );
+} );