diff --git a/devtools/client/inspector/changes/moz.build b/devtools/client/inspector/changes/moz.build
index e0b90a3f1f95..af09f21929d5 100644
--- a/devtools/client/inspector/changes/moz.build
+++ b/devtools/client/inspector/changes/moz.build
@@ -19,6 +19,7 @@ DevToolsModules(
 )
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
+XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 
 with Files('**'):
     BUG_COMPONENT = ('DevTools', 'Inspector: Changes')
diff --git a/devtools/client/inspector/changes/test/unit/.eslintrc.js b/devtools/client/inspector/changes/test/unit/.eslintrc.js
new file mode 100644
index 000000000000..54a9a6361b5c
--- /dev/null
+++ b/devtools/client/inspector/changes/test/unit/.eslintrc.js
@@ -0,0 +1,6 @@
+"use strict";
+
+module.exports = {
+  // Extend from the common devtools xpcshell eslintrc config.
+  "extends": "../../../../../.eslintrc.xpcshell.js"
+};
diff --git a/devtools/client/inspector/changes/test/unit/head.js b/devtools/client/inspector/changes/test/unit/head.js
new file mode 100644
index 000000000000..5d36a00cb6de
--- /dev/null
+++ b/devtools/client/inspector/changes/test/unit/head.js
@@ -0,0 +1,6 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { require } = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
diff --git a/devtools/client/inspector/changes/test/unit/mocks.js b/devtools/client/inspector/changes/test/unit/mocks.js
new file mode 100644
index 000000000000..b99253f92674
--- /dev/null
+++ b/devtools/client/inspector/changes/test/unit/mocks.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint-disable comma-dangle */
+
+"use strict";
+
+/**
+ * Snapshot of the Redux state for the Changes panel.
+ *
+ * It corresponds to the tracking of a single property value change (background-color)
+ * within a deeply nested CSS at-rule structure from an inline stylesheet:
+ *
+ * @media (min-width: 50em) {
+ *   @supports (display: grid) {
+ *     body {
+ *       - background-color: royalblue;
+ *       + background-color: red;
+ *     }
+ *   }
+ * }
+ */
+module.exports.CHANGES_STATE = {
+  "source1": {
+    "type": "inline",
+    "href": "http://localhost:5000/at-rules-nested.html",
+    "id": "source1",
+    "index": 0,
+    "isFramed": false,
+    "rules": {
+      "rule1": {
+        "selector": "@media (min-width: 50em)",
+        "ruleId": "rule1",
+        "add": [],
+        "remove": [],
+        "children": [
+          "rule2"
+        ]
+      },
+      "rule2": {
+        "selector": "@supports (display: grid)",
+        "ruleId": "rule2",
+        "add": [],
+        "remove": [],
+        "children": [
+          "rule3"
+        ],
+        "parent": "rule1"
+      },
+      "rule3": {
+        "selector": "body",
+        "ruleId": "rule3",
+        "add": [
+          {
+            "property": "background-color",
+            "value": "red",
+            "index": 0
+          }
+        ],
+        "remove": [
+          {
+            "property": "background-color",
+            "value": "royalblue",
+            "index": 0
+          }
+        ],
+        "children": [],
+        "parent": "rule2"
+      }
+    }
+  }
+};
diff --git a/devtools/client/inspector/changes/test/unit/test_changes_stylesheet.js b/devtools/client/inspector/changes/test/unit/test_changes_stylesheet.js
new file mode 100644
index 000000000000..7e2fb5bfa19f
--- /dev/null
+++ b/devtools/client/inspector/changes/test/unit/test_changes_stylesheet.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that getChangesStylesheet() serializes tracked changes from nested CSS rules
+// into the expected stylesheet format.
+
+const { getChangesStylesheet } = require("devtools/client/inspector/changes/selectors/changes");
+
+const { CHANGES_STATE } = require("resource://test/mocks");
+
+// Wrap multi-line string in backticks and trim to ensure exact string check in test.
+const STYLESHEET_FOR_ANCESTOR = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+@media (min-width: 50em) {
+  @supports (display: grid) {
+    body {
+      /* background-color: royalblue; */
+      background-color: red;
+    }
+  }
+}
+`.trim();
+
+// Wrap multi-line string in backticks and trim to ensure exact string check in test.
+const STYLESHEET_FOR_DESCENDANT = `
+/* Inline #0 | http://localhost:5000/at-rules-nested.html */
+
+body {
+  /* background-color: royalblue; */
+  background-color: red;
+}
+`.trim();
+
+add_test(() => {
+  info("Check stylesheet generated for the first ancestor in the CSS rule tree.");
+  equal(getChangesStylesheet(CHANGES_STATE), STYLESHEET_FOR_ANCESTOR,
+    "Stylesheet includes all ancestors.");
+
+  info("Check stylesheet generated for the last descendant in the CSS rule tree.");
+  const filter = { sourceIds: ["source1"], ruleIds: ["rule3"] };
+  equal(getChangesStylesheet(CHANGES_STATE, filter), STYLESHEET_FOR_DESCENDANT,
+    "Stylesheet includes just descendant.");
+
+  run_next_test();
+});
diff --git a/devtools/client/inspector/changes/test/unit/xpcshell.ini b/devtools/client/inspector/changes/test/unit/xpcshell.ini
new file mode 100644
index 000000000000..886645a70834
--- /dev/null
+++ b/devtools/client/inspector/changes/test/unit/xpcshell.ini
@@ -0,0 +1,8 @@
+[DEFAULT]
+tags = devtools
+firefox-appdir = browser
+head = head.js
+support-files =
+  ./mocks.js
+
+[test_changes_stylesheet.js]